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
適用対象全要素
継承継承する
メディアvisual
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザー実装状況

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応

55

13 -webkit- 1

?

43

6 -moz- 2

10 -ms- 3445.1 -webkit-
Hyphenation dictionary for Afrikaans (af, af-*) ? ?8 なし ? なし
Hyphenation dictionary for Bosnian, Serbian, and Serbo-Croatian (sh, sh-*, sr, sr-*, bs, bs-*) ? ?8 なし ? なし
Hyphenation dictionary for Bulgarian (bg, bg-*) ? ?8 なし ? なし
Hyphenation dictionary for Catalan (ca, ca-*) ? ?810 ?5.1
Hyphenation dictionary for Croatian (hr, hr-*) ? ?810 ?9.1
Hyphenation dictionary for Czech (cs, cs-*) ? ? なし10 ?9.1
Hyphenation dictionary for Esperanto (eo, eo-*) ? ?8 なし ? なし
Hyphenation dictionary for Estonian (et, et-*) ? ?8 なし ? なし
Hyphenation dictionary for Danish (da, da-*) ? ?810 ?5.1
Hyphenation dictionary for Dutch (nl, nl-*) ? ?810 ?5.1
Hyphenation dictionary for Finnish (fi, fi-*) ? ?810 ?9.1
Hyphenation dictionary for French (fr, fr-*) ? ?810 ?5.1
Hyphenation dictionary for Galician (gl, gl-*) ? ?9 なし ? なし
Hyphenation dictionary for German, Reformed Orthography of 1996 (de, de-1996, de-DE, de-AT, de-*) ? ?810 ?5.1
Hyphenation dictionary for German, Traditional Orthography of 1901 (de-1901, de-AT-1901, de-DE-1901) ? ?8 ? ? ?
Hyphenation dictionary for German, Swiss Orthography (de-CH, de-CH-*) ? ?8 ? ? ?
Hyphenation dictionary for Hungarian (hu, hu-*) ? ?9 なし ?9.1
Hyphenation dictionary for Icelandic (is, is-*) ? ?8 なし ? なし
Hyphenation dictionary for Interlingua (ia, ia-*) ? ?8 なし ? なし
Hyphenation dictionary for Italian (it, it-*) ? ?910 ?5.1
Hyphenation dictionary for Kurmanji (kmr, kmr-*) ? ?8 なし ? なし
Hyphenation dictionary for Latin (la, la-*) あり ?8 なし44 なし
Hyphenation dictionary for Lithuanian (lt, lt-*) ? ?8 なし ? なし
Hyphenation dictionary for Mongolian (mn, mn-*) ? ?8 なし ? なし
Hyphenation dictionary for Norwegian (Bokmål) (no, no-*, nb, nb-*) ? ?810 ?5.1
Hyphenation dictionary for Norwegian (Nynorsk) (nn, nn-*) ? ?810 ? なし
Hyphenation dictionary for Polish (pl, pl-*) ? ?3110 ?9.1
Hyphenation dictionary for Portuguese (pt, pt-*) ? ?810 ?9.1
Hyphenation dictionary for Brazilian Portuguese (pt-BR) ? ?8410 ? なし
Hyphenation dictionary for Russian (ru, ru-*) ? ?810 ?5.1
Hyphenation dictionary for Slovenian (sl, sl-*) ? ?8 なし ? なし
Hyphenation dictionary for Spanish (es, es-*) ? ?810 ?5.1
Hyphenation dictionary for Swedish (sv, sv-*) ? ?810 ?5.1
Hyphenation dictionary for Turkish (tr, tr-*) ? ?910 ?5.1
Hyphenation dictionary for Ukrainian (uk, uk-*) ? ?9 なし ?9.1
Hyphenation dictionary for Upper Sorbian (hsb, hsb-*) ? ?8 なし ? なし
Hyphenation dictionary for Welsh (cy, cy-*) ? ?8 なし ? なし
Hyphenation dictionary for English (en, en-*)55 ?6510445.16
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応

55

4 -webkit-

55 ?

43

6 -moz- 2

444.2 -webkit- 6.0
Hyphenation dictionary for Afrikaans (af, af-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Bosnian, Serbian, and Serbo-Croatian (sh, sh-*, sr, sr-*, bs, bs-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Bulgarian (bg, bg-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Catalan (ca, ca-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Croatian (hr, hr-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Czech (cs, cs-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Esperanto (eo, eo-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Estonian (et, et-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Danish (da, da-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Dutch (nl, nl-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Finnish (fi, fi-*) ? ? ? ? ? ? ?
Hyphenation dictionary for French (fr, fr-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Galician (gl, gl-*) ? ? ? ? ? ? ?
Hyphenation dictionary for German, Reformed Orthography of 1996 (de, de-1996, de-DE, de-AT, de-*) ? ? ? ? ? ? ?
Hyphenation dictionary for German, Traditional Orthography of 1901 (de-1901, de-AT-1901, de-DE-1901) ? ? ? ? ? ? ?
Hyphenation dictionary for German, Swiss Orthography (de-CH, de-CH-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Hungarian (hu, hu-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Icelandic (is, is-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Interlingua (ia, ia-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Italian (it, it-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Kurmanji (kmr, kmr-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Latin (la, la-*) あり あり ? ?44 ? あり
Hyphenation dictionary for Lithuanian (lt, lt-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Mongolian (mn, mn-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Norwegian (Bokmål) (no, no-*, nb, nb-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Norwegian (Nynorsk) (nn, nn-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Polish (pl, pl-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Portuguese (pt, pt-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Brazilian Portuguese (pt-BR) ? ? ? ? ? ? ?
Hyphenation dictionary for Russian (ru, ru-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Slovenian (sl, sl-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Spanish (es, es-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Swedish (sv, sv-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Turkish (tr, tr-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Ukrainian (uk, uk-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Upper Sorbian (hsb, hsb-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Welsh (cy, cy-*) ? ? ? ? ? ? ?
Hyphenation dictionary for English (en, en-*)5555 ? ?44 ?6.0

1. Only -webkit-hyphens: none is supported.

2. Automatic hyphenation only works for languages with hyphenation dictionaries that are integrated into Firefox.

3. Automatic hyphenation only works for languages with hyphenation dictionaries that are integrated into Internet Explorer.

4. For Brazilian Portuguese, Firefox uses a Portuguese dictionary.

5. For English, Firefox uses an en-US dictionary

6. For English, Safari uses different en-GB and en-US dictionaries.

関連情報

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

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