Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

概要

hyphens CSS プロパティは、行を折り返す際の単語のハイフネーションを設定します。ハイフネーションをまったく行わない、ブラウザがいつハイフネーションを行うべきかを制御する、あるいはブラウザにハイフネーションを制御させることができます。

ハイフネーションの規則は言語に依存します。HTML では、言語を lang 属性で判断します。またブラウザは、この属性が設定されていて適切なハイフネーション辞書が使用できる場合に限り、ハイフネーションを行います。XML では xml:lang 属性を使用しなければなりません。

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

初期値manual
適用対象全要素
継承継承する
メディアvisual
計算値指定値
アニメーションの可否不可
正規順序形式文法で定義される一意のあいまいでない順序

構文

hyphens: none;
hyphens: manual;
hyphens: auto;

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

none
単語内の文字で改行位置が提案されていても、単語を改行で分割しません。行はホワイトスペースの位置のみで折り返します。
manual
単語は行送りの際に、単語内にある改行位置を示す文字のみで分割します。詳しくは 改行候補位置を示す を参照してください。
auto
ブラウザは自身が選択した規則に従って、ハイフネーションを行うのに適切な位置で自動的に単語を分割します。改行候補位置を示す で扱っている改行候補位置は、可能であれば自動的に改行位置として選択されます。
注記: auto 設定の動作は、ハイフネーションの規則を選択するため適切にタグ付けされた言語に依存します。選択した言語で自動ハイフネーションが適用されることを保証するために、言語を lang HTML 属性で指定しなければなりません。

改行候補位置を示す

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

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

形式構文

none | manual | auto

以下の CSS では 3 つのクラスを作成しており、それぞれが hyphens プロパティで指定可能な設定になります。

<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 algo is deciding (if needed)
    <p lang="en" class="auto">An extreme&shy;ly long English word</p>
  </li>
</ul>
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 Level 3
hyphens の定義
草案 最初の定義

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 13-webkit[1]

6.0 (6.0)-moz[2]
43.0 (43.0)

10.0-ms[3] 未サポート 5.1-webkit
アフリカーンス語 (af, af-*) のハイフネーション辞書 未サポート 8.0 (8.0) 未サポート 未サポート 未サポート
ブルガリア語 (bg, bg-*) のハイフネーション辞書 未サポート 8.0 (8.0) 未サポート 未サポート 未サポート
カタルーニャ語 (ca, ca-*) のハイフネーション辞書 未サポート 8.0 (8.0) 10.0 未サポート 未サポート
クロアチア語 (hr, hr-*) のハイフネーション辞書 未サポート 8.0 (8.0) 未サポート 未サポート 未サポート
チェコ語 (cs, cs-*) のハイフネーション辞書 未サポート 未サポート 10.0 未サポート 未サポート
デンマーク語 (da, da-*) のハイフネーション辞書 未サポート 8.0 (8.0) 10.0 未サポート 未サポート
オランダ語 (nl, nl-*) のハイフネーション辞書 未サポート 8.0 (8.0) 10.0 未サポート 5.1
英語 (en, en-*) のハイフネーション辞書 未サポート 6.0 (6.0)[4] 10.0 未サポート 5.1[5]
エスペラント語 (eo, eo-*) のハイフネーション辞書 未サポート 8.0 (8.0) 未サポート 未サポート 未サポート
エストニア語 (et, et-*) のハイフネーション辞書 未サポート 8.0 (8.0) 未サポート 未サポート 未サポート
フィンランド語 (fi, fi-*) のハイフネーション辞書 未サポート 8.0 (8.0) 未サポート 未サポート 未サポート
フランス語 (fr, fr-*) のハイフネーション辞書 未サポート 8.0 (8.0) 10.0 未サポート 5.1
ガリシア語 (gl, gl-*) のハイフネーション辞書 未サポート 9.0 未サポート 未サポート 未サポート
ドイツ語 (1901 年版の従来の正書法) (de-1901, de-AT-1901, de-DE-1901) のハイフネーション辞書 未サポート 8.0 ? 未サポート ?
ドイツ語 (1996 年改訂版の正書法) (de, de-1996, de-DE, de-AT, de-*) のハイフネーション辞書 未サポート 8.0 10.0 未サポート 5.1
スイスドイツ語 (de-CH, de-CH-*) のハイフネーション辞書 未サポート 8.0 ? 未サポート ?
ハンガリー語 (hu, hu-*) のハイフネーション辞書 未サポート 9.0 未サポート 未サポート 未サポート
アイスランド語 (is, is-*) のハイフネーション辞書 未サポート 8.0 未サポート 未サポート 未サポート
インターリングア (ia, ia-*) のハイフネーション辞書 未サポート 8.0 未サポート 未サポート 未サポート
イタリア語 (it, it-*) のハイフネーション辞書 未サポート 9.0 10.0 未サポート 5.1
クルマンジー (kmr, kmr-*) のハイフネーション辞書 未サポート 8.0 未サポート 未サポート 未サポート
ラテン語 (la, la-*) のハイフネーション辞書 未サポート 8.0 未サポート 未サポート 未サポート
リトアニア語 (lt, lt-*) のハイフネーション辞書 未サポート 8.0 未サポート 未サポート 未サポート
モンゴル語 (mn, mn-*) のハイフネーション辞書 未サポート 8.0 未サポート 未サポート 未サポート
ノルウェー語 (ブークモール) (no, no-*, nb, nb-*) のハイフネーション辞書 未サポート 8.0 10.0 未サポート 未サポート
ノルウェー語 (ニーノシュク) (nn, nn-*) のハイフネーション辞書 未サポート 8.0 10.0 未サポート 未サポート
ポーランド語 (pl, pl-*) のハイフネーション辞書 未サポート 31.0 10.0 未サポート 未サポート
ポルトガル語 (pt, pt-*) のハイフネーション辞書 未サポート 8.0[6] 10.0 未サポート 未サポート
ブラジルポルトガル語 (pt-BR) のハイフネーション辞書 未サポート 8.0[6] 10.0 未サポート 未サポート
ロシア語 (ru, ru-*) のハイフネーション辞書 未サポート 8.0 10.0 未サポート 5.1
セルビア語、ボスニア語、セルビア・クロアチア語 (sh, sh-*, sr, sr-*, bs, bs-*) のハイフネーション辞書 未サポート 8.0 未サポート 未サポート 未サポート
スロベニア語 (sl, sl-*) のハイフネーション辞書 未サポート 8.0 未サポート 未サポート 未サポート
スペイン語 (es, es-*) のハイフネーション辞書 未サポート 8.0 10.0 未サポート 5.1
スウェーデン語 (sv, sv-*) のハイフネーション辞書 未サポート 8.0 10.0 未サポート 未サポート
トルコ語 (tr, tr-*) のハイフネーション辞書 未サポート 9.0 10.0 未サポート 未サポート
ウクライナ語 (uk, uk-*) のハイフネーション辞書 未サポート 9.0 未サポート 未サポート 未サポート
高地ソルブ語 (hsb, hsb-*) のハイフネーション辞書 未サポート 8.0 未サポート 未サポート 未サポート
ウェールズ語 (cy, cy-*) のハイフネーション辞書 未サポート 8.0 未サポート 未サポート 未サポート
その他の言語のハイフネーション辞書 未サポート 未サポート 未サポート 未サポート 未サポート
機能 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート 4.0-webkit[1] 6.0 (6.0)-moz[2]
43.0 (43.0)
未サポート 未サポート 4.2-webkit
アフリカーンス語 (af, af-*) のハイフネーション辞書 ? ? ? ? ?
ブルガリア語 (bg, bg-*) のハイフネーション辞書 ? ? ? ? ?
カタルーニャ語 (ca, ca-*) のハイフネーション辞書 ? ? ? ? ?
クロアチア語 (hr, hr-*) のハイフネーション辞書 ? ? ? ? ?
チェコ語 (cs, cs-*) のハイフネーション辞書 ? ? ? ? ?
デンマーク語 (da, da-*) のハイフネーション辞書 ? ? ? ? ?
オランダ語 (nl, nl-*) のハイフネーション辞書 ? ? ? ? ?
英語 (en, en-*) のハイフネーション辞書 ? ? ? ? ?
エスペラント語 (eo, eo-*) のハイフネーション辞書 ? ? ? ? ?
エストニア語 (et, et-*) のハイフネーション辞書 ? ? ? ? ?
フィンランド語 (fi, fi-*) のハイフネーション辞書 ? ? ? ? ?
フランス語 (fr, fr-*) のハイフネーション辞書 ? ? ? ? ?
ガリシア語 (gl, gl-*) のハイフネーション辞書 ? ? ? ? ?
ドイツ語 (1901 年版の従来の正書法) (de-1901, de-AT-1901, de-DE-1901) のハイフネーション辞書 ? ? ? ? ?
ドイツ語 (1996 年改訂版の正書法) (de, de-1996, de-DE, de-AT, de-*) のハイフネーション辞書 ? ? ? ? ?
スイスドイツ語 (de-CH, de-CH-*) のハイフネーション辞書 ? ? ? ? ?
ハンガリー語 (hu, hu-*) のハイフネーション辞書 ? ? ? ? ?
アイスランド語 (is, is-*) のハイフネーション辞書 ? ? ? ? ?
インターリングア (ia, ia-*) のハイフネーション辞書 ? ? ? ? ?
イタリア語 (it, it-*) のハイフネーション辞書 ? ? ? ? ?
クルマンジー (kmr, kmr-*) のハイフネーション辞書 ? ? ? ? ?
ラテン語 (la, la-*) のハイフネーション辞書 ? ? ? ? ?
リトアニア語 (lt, lt-*) のハイフネーション辞書 ? ? ? ? ?
モンゴル語 (mn, mn-*) のハイフネーション辞書 ? ? ? ? ?
ノルウェー語 (ブークモール) (no, no-*, nb, nb-*) のハイフネーション辞書 ? ? ? ? ?
ノルウェー語 (ニーノシュク) (nn, nn-*) のハイフネーション辞書 ? ? ? ? ?
ポーランド語 (pl, pl-*) のハイフネーション辞書 ? ? ? ? ?
ポルトガル語 (pt, pt-*) のハイフネーション辞書 ? ? ? ? ?
ブラジルポルトガル語 (pt-BR) のハイフネーション辞書 ? ? ? ?
ロシア語 (ru, ru-*) のハイフネーション辞書 ? ? ? ? ?
セルビア語、ボスニア語、セルビア・クロアチア語 (sh, sh-*, sr, sr-*, bs, bs-*) のハイフネーション辞書 ? ? ? ? ?
スロベニア語 (sl, sl-*) のハイフネーション辞書 ? ? ? ? ?
スペイン語 (es, es-*) のハイフネーション辞書 ? ? ? ? ?
スウェーデン語 (sv, sv-*) のハイフネーション辞書 ? ? ? ? ?
トルコ語 (tr, tr-*) のハイフネーション辞書 ? ? ? ? ?
ウクライナ語 (uk, uk-*) のハイフネーション辞書 ? ? ? ? ?
高地ソルブ語 (hsb, hsb-*) のハイフネーション辞書 ? ? ? ? ?
ウェールズ語 (cy, cy-*) のハイフネーション辞書 ? ? ? ? ?
その他の言語のハイフネーション辞書 ? ? ? ? ?

[1] 自動ハイフネーションは実施できず-webkit-hyphens: none のみサポートしています。

[2] 自動ハイフネーションは、ハイフネーション辞書が Gecko に統合されている言語に限り動作します。

[3] 自動ハイフネーションは、ハイフネーション辞書が Internet Explorer に統合されている言語に限り動作します。

[4] en-US の辞書を使用します。

[5] en-GB と en-US で異なる辞書を使用します。

[6] ポルトガル語の辞書を使用します。

関連情報

ドキュメントのタグと貢献者

 このページの貢献者: yyss, SphinxKnight, Sebastianz, ethertank, FredB
 最終更新者: yyss,