hyphens

CSShyphens プロパティは、文字列を複数行にわたって折り返す際に、単語のハイフネーションを行う方法を指定します。ハイフネーションをまったく行わなかったり、文字列中に手動で指定された位置でハイフネーションを行ったり、ブラウザーに適切な位置にハイフンを挿入させたりすることができます。

ハイフネーションの規則は言語に依存します。 HTML では言語は lang 属性で特定され、ブラウザーはこの属性が存在し、適切なハイフネーション辞書が利用できる場合にのみハイフネーションを行います。 XML では、 xml:lang 属性を使用する必要があります。

注: どのようにハイフネーションを行うかの規則は仕様書で明確に定義されていないため、厳密なハイフネーションの方式はブラウザにより異なります。

構文

/* キーワード値 */
hyphens: none;
hyphens: manual;
hyphens: auto;

/* グローバル値 */
hyphens: inherit;
hyphens: initial;
hyphens: unset;

hyphens プロパティは、以下に挙げたキーワード値のうちの一つで指定します。

none
単語内で分割が提案されている文字の位置であっても、改行で単語を分割しません。行はホワイトスペースの位置のみで折り返します。
manual
単語内で分割が提案されている文字の位置でのみ、行の折り返しで単語を分割します。詳しくは改行候補位置の提案を参照してください。
auto
ブラウザーは自身が選択した規則に従って、ハイフネーションを行うのに適切な位置で自動的に単語を分割します。しかし、改行候補位置(改行候補位置の提案を参照)があれば、自動的な改行位置の選択を上書きします。

メモ: auto を設定したときの振る舞いは、正しくタグ付けされた言語に依存し、適切なハイフネーション規則が選択されます。選択した言語で自動的なハイフネーションが適用されるようにすることを保証するために、 HTML の lang 属性を必ず指定してください。

形式文法

none | manual | auto

改行候補位置の提案

文字列中で改行が可能な位置を手動で指定するために使用できる Unicode 文字は2つあります。

U+2010 (HYPHEN)
「ハード」ハイフン文字は、目に見える改行候補位置を示します。実際はその位置で改行されない場合でも、ハイフンが表示されます。
U+00AD (SHY)
不可視の「ソフト」ハイフンです。この文字は表示されませんが、ブラウザーが必要に応じて単語を分割できる位置を示します。 HTML では、­ を使用してソフトハイフンを挿入することができます。

以下の例では3つのクラスを使用し、それぞれの hyphens プロパティの設定を示します。

HTML

<ul>
  <li><code>none</code>: no hyphen; overflow if needed
    <p lang="en" class="none">An extreme&shy;ly long English word</p>
  </li>  
  <li><code>manual</code>: hyphen only at &amp;hyphen; or &amp;shy; (if needed)
    <p lang="en" class="manual">An extreme&shy;ly long English word</p>
  </li>
  <li><code>auto</code>: hyphen where the algorithm is deciding (if needed)
    <p lang="en" class="auto">An extreme&shy;ly long English word</p>
  </li>
</ul>

CSS

p { 
  width: 55px;
  border: 1px solid black;
 }
p.none {
  -webkit-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}
p.manual {
  -webkit-hyphens: manual;
  -ms-hyphens: manual;
  hyphens: manual;
}
p.auto {
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

結果

仕様書

仕様書 策定状況 コメント
CSS Text Module Level 3
hyphens の定義
草案 初回定義。
初期値manual
適用対象すべての要素
継承あり
メディア視覚
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザー実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
hyphensChrome 部分対応 55
補足
部分対応 55
補足
補足 auto value is only supported on macOS and Android and for languages the OS provides hyphenation for.
完全対応 13
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 Only -webkit-hyphens: none is supported.
Edge 部分対応 12
接頭辞付き 補足
部分対応 12
接頭辞付き 補足
接頭辞付き -ms- のベンダー接頭辞が必要
補足 Only works if the specified language is the same as the language of the underlying OS.
Firefox 完全対応 43
完全対応 43
完全対応 6
接頭辞付き 補足
接頭辞付き -moz- のベンダー接頭辞が必要
補足 Automatic hyphenation only works for languages with hyphenation dictionaries that are integrated into Firefox.
IE 部分対応 10
接頭辞付き 補足
部分対応 10
接頭辞付き 補足
接頭辞付き -ms- のベンダー接頭辞が必要
補足 Only works if the specified language is the same as the language of the underlying OS.
Opera 部分対応 44
補足
部分対応 44
補足
補足 auto value is only supported on macOS and Android.
Safari 完全対応 5.1
接頭辞付き
完全対応 5.1
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
WebView Android 完全対応 55
完全対応 55
完全対応 4
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Chrome Android 完全対応 55
完全対応 55
完全対応 18
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Firefox Android 完全対応 43
完全対応 43
完全対応 6
接頭辞付き 補足
接頭辞付き -moz- のベンダー接頭辞が必要
補足 Automatic hyphenation only works for languages with hyphenation dictionaries that are integrated into Firefox.
Opera Android 完全対応 43Safari iOS 完全対応 4.2
接頭辞付き
完全対応 4.2
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Samsung Internet Android 完全対応 6.0
Hyphenation dictionary for Afrikaans (af, af-*)Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 8IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 8Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
Hyphenation dictionary for Bosnian, Serbian, and Serbo-Croatian (sh, sh-*, sr, sr-*, bs, bs-*)Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 8IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 8Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
Hyphenation dictionary for Bulgarian (bg, bg-*)Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 8IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 8Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
Hyphenation dictionary for Catalan (ca, ca-*)Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 8IE 未対応 なしOpera 未対応 なしSafari 完全対応 5.1WebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 8Opera Android 未対応 なしSafari iOS 完全対応 5Samsung Internet Android 未対応 なし
Hyphenation dictionary for Croatian (hr, hr-*)Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 8IE 未対応 なしOpera 未対応 なしSafari 完全対応 9.1WebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 8Opera Android 未対応 なしSafari iOS 完全対応 9.1Samsung Internet Android 未対応 なし
Hyphenation dictionary for Czech (cs, cs-*)Chrome 未対応 なしEdge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 未対応 なしSafari 完全対応 9.1WebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 完全対応 9.1Samsung Internet Android 未対応 なし
Hyphenation dictionary for Danish (da, da-*)Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 8IE 未対応 なしOpera 未対応 なしSafari 完全対応 5.1WebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 8Opera Android 未対応 なしSafari iOS 完全対応 5Samsung Internet Android 未対応 なし
Hyphenation dictionary for Dutch (nl, nl-*)Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 8IE 未対応 なしOpera 未対応 なしSafari 完全対応 5.1WebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 8Opera Android 未対応 なしSafari iOS 完全対応 5Samsung Internet Android 未対応 なし
Hyphenation dictionary for English (en, en-*)Chrome 完全対応 55Edge 完全対応 12Firefox 完全対応 6
補足
完全対応 6
補足
補足 For English, Firefox uses an en-US dictionary
IE 完全対応 10Opera 完全対応 44Safari 完全対応 5.1
補足
完全対応 5.1
補足
補足 For English, Safari uses different en-GB and en-US dictionaries.
WebView Android 完全対応 55Chrome Android 完全対応 55Firefox Android 完全対応 6
補足
完全対応 6
補足
補足 For English, Firefox uses an en-US dictionary
Opera Android 完全対応 43Safari iOS 完全対応 6
補足
完全対応 6
補足
補足 For English, Safari uses different en-GB and en-US dictionaries.
Samsung Internet Android 完全対応 6.0
Hyphenation dictionary for Esperanto (eo, eo-*)Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 8IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 8Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
Hyphenation dictionary for Estonian (et, et-*)Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 8IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 8Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
Hyphenation dictionary for Finnish (fi, fi-*)Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 8IE 未対応 なしOpera 未対応 なしSafari 完全対応 9.1WebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 8Opera Android 未対応 なしSafari iOS 完全対応 9.1Samsung Internet Android 未対応 なし
Hyphenation dictionary for French (fr, fr-*)Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 8IE 未対応 なしOpera 未対応 なしSafari 完全対応 5.1WebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 8Opera Android 未対応 なしSafari iOS 完全対応 5Samsung Internet Android 未対応 なし
Hyphenation dictionary for Galician (gl, gl-*)Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 9IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 9Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
Hyphenation dictionary for German, Reformed Orthography of 1996 (de, de-1996, de-DE, de-AT, de-*)Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 8IE 未対応 なしOpera 未対応 なしSafari 完全対応 5.1WebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 8Opera Android 未対応 なしSafari iOS 完全対応 5Samsung Internet Android 未対応 なし
Hyphenation dictionary for German, Swiss Orthography (de-CH, de-CH-*)Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 8IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 8Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
Hyphenation dictionary for German, Traditional Orthography of 1901 (de-1901, de-AT-1901, de-DE-1901)Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 8IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 8Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
Hyphenation dictionary for Hungarian (hu, hu-*)Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 9IE 未対応 なしOpera 未対応 なしSafari 完全対応 9.1WebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 9Opera Android 未対応 なしSafari iOS 完全対応 9.1Samsung Internet Android 未対応 なし
Hyphenation dictionary for Icelandic (is, is-*)Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 8IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 8Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
Hyphenation dictionary for Interlingua (ia, ia-*)Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 8IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 8Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
Hyphenation dictionary for Italian (it, it-*)Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 9IE 未対応 なしOpera 未対応 なしSafari 完全対応 5.1WebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 9Opera Android 未対応 なしSafari iOS 完全対応 5Samsung Internet Android 未対応 なし
Hyphenation dictionary for Kurmanji (kmr, kmr-*)Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 8IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 8Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
Hyphenation dictionary for Latin (la, la-*)Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 8IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 8Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
Hyphenation dictionary for Lithuanian (lt, lt-*)Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 8IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 8Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
Hyphenation dictionary for Mongolian (mn, mn-*)Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 8IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 8Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
Hyphenation dictionary for Norwegian (Nynorsk) (nn, nn-*)Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 8IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 8Opera Android 未対応 なしSafari iOS 完全対応 5Samsung Internet Android 未対応 なし
Hyphenation dictionary for Norwegian (Bokmål) (no, no-*, nb, nb-*)Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 8IE 未対応 なしOpera ? Safari 完全対応 5.1WebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 8Opera Android ? Safari iOS 完全対応 5Samsung Internet Android 未対応 なし
Hyphenation dictionary for Polish (pl, pl-*)Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 31IE 未対応 なしOpera 未対応 なしSafari 完全対応 9.1WebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 31Opera Android 未対応 なしSafari iOS 完全対応 9.1Samsung Internet Android 未対応 なし
Hyphenation dictionary for Portuguese (pt, pt-*)Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 8IE 未対応 なしOpera 未対応 なしSafari 完全対応 9.1WebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 8Opera Android 未対応 なしSafari iOS 完全対応 9.1Samsung Internet Android 未対応 なし
Hyphenation dictionary for Brazilian Portuguese (pt-BR)Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 8
補足
完全対応 8
補足
補足 For Brazilian Portuguese, Firefox uses a Portuguese dictionary.
IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 8
補足
完全対応 8
補足
補足 For Brazilian Portuguese, Firefox uses a Portuguese dictionary.
Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
Hyphenation dictionary for Russian (ru, ru-*)Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 8IE 未対応 なしOpera 未対応 なしSafari 完全対応 5.1WebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 8Opera Android 未対応 なしSafari iOS 完全対応 5Samsung Internet Android 未対応 なし
Hyphenation dictionary for Slovenian (sl, sl-*)Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 8IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 8Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
Hyphenation dictionary for Spanish (es, es-*)Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 8IE 未対応 なしOpera 未対応 なしSafari 完全対応 5.1WebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 8Opera Android 未対応 なしSafari iOS 完全対応 5Samsung Internet Android 未対応 なし
Hyphenation dictionary for Swedish (sv, sv-*)Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 8IE 未対応 なしOpera 未対応 なしSafari 完全対応 5.1WebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 8Opera Android 未対応 なしSafari iOS 完全対応 5Samsung Internet Android 未対応 なし
Hyphenation dictionary for Turkish (tr, tr-*)Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 9IE 未対応 なしOpera 未対応 なしSafari 完全対応 5.1WebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 9Opera Android 未対応 なしSafari iOS 完全対応 5Samsung Internet Android 未対応 なし
Hyphenation dictionary for Ukrainian (uk, uk-*)Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 9IE 未対応 なしOpera 未対応 なしSafari 完全対応 9.1WebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 9Opera Android 未対応 なしSafari iOS 完全対応 9.1Samsung Internet Android 未対応 なし
Hyphenation dictionary for Upper Sorbian (hsb, hsb-*)Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 8IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 8Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
Hyphenation dictionary for Welsh (cy, cy-*)Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 8IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 8Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
部分対応  
部分対応
未対応  
未対応
実装状況不明  
実装状況不明
実装ノートを参照してください。
実装ノートを参照してください。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連情報