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 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 部分対応 55
補足
部分対応 55
補足
補足 auto value is only supported on macOS and Android.
完全対応 13
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 Only -webkit-hyphens: none is supported.
Edge 完全対応 12
接頭辞付き 補足
完全対応 12
接頭辞付き 補足
接頭辞付き -ms- のベンダー接頭辞が必要
補足 Automatic hyphenation only works for languages with hyphenation dictionaries that are integrated into Internet Explorer.
Firefox 完全対応 43
完全対応 43
完全対応 6
接頭辞付き 補足
接頭辞付き -moz- のベンダー接頭辞が必要
補足 Automatic hyphenation only works for languages with hyphenation dictionaries that are integrated into Firefox.
IE 完全対応 10
接頭辞付き 補足
完全対応 10
接頭辞付き 補足
接頭辞付き -ms- のベンダー接頭辞が必要
補足 Automatic hyphenation only works for languages with hyphenation dictionaries that are integrated into Internet Explorer.
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
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge Mobile ? Firefox Android 完全対応 43
完全対応 43
完全対応 6
接頭辞付き 補足
接頭辞付き -moz- のベンダー接頭辞が必要
補足 Automatic hyphenation only works for languages with hyphenation dictionaries that are integrated into Firefox.
Opera Android 完全対応 44Safari 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 ? Edge Mobile ? Firefox Android ? Opera 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 ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Bulgarian (bg, bg-*)Chrome ? Edge ? Firefox 完全対応 8IE 未対応 なしOpera ? Safari 未対応 なしWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Catalan (ca, ca-*)Chrome ? Edge ? Firefox 完全対応 8IE 完全対応 10Opera ? Safari 完全対応 5.1WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Croatian (hr, hr-*)Chrome ? Edge ? Firefox 完全対応 8IE 完全対応 10Opera ? Safari 完全対応 9.1WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Czech (cs, cs-*)Chrome ? Edge ? Firefox 未対応 なしIE 完全対応 10Opera ? Safari 完全対応 9.1WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Esperanto (eo, eo-*)Chrome ? Edge ? Firefox 完全対応 8IE 未対応 なしOpera ? Safari 未対応 なしWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Estonian (et, et-*)Chrome ? Edge ? Firefox 完全対応 8IE 未対応 なしOpera ? Safari 未対応 なしWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Danish (da, da-*)Chrome ? Edge ? Firefox 完全対応 8IE 完全対応 10Opera ? Safari 完全対応 5.1WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Dutch (nl, nl-*)Chrome ? Edge ? Firefox 完全対応 8IE 完全対応 10Opera ? Safari 完全対応 5.1WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Finnish (fi, fi-*)Chrome ? Edge ? Firefox 完全対応 8IE 完全対応 10Opera ? Safari 完全対応 9.1WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for French (fr, fr-*)Chrome ? Edge ? Firefox 完全対応 8IE 完全対応 10Opera ? Safari 完全対応 5.1WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Galician (gl, gl-*)Chrome ? Edge ? Firefox 完全対応 9IE 未対応 なしOpera ? Safari 未対応 なしWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera 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 完全対応 10Opera ? Safari 完全対応 5.1WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera 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 ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for German, Swiss Orthography (de-CH, de-CH-*)Chrome ? Edge ? Firefox 完全対応 8IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Hungarian (hu, hu-*)Chrome ? Edge ? Firefox 完全対応 9IE 未対応 なしOpera ? Safari 完全対応 9.1WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Icelandic (is, is-*)Chrome ? Edge ? Firefox 完全対応 8IE 未対応 なしOpera ? Safari 未対応 なしWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Interlingua (ia, ia-*)Chrome ? Edge ? Firefox 完全対応 8IE 未対応 なしOpera ? Safari 未対応 なしWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Italian (it, it-*)Chrome ? Edge ? Firefox 完全対応 9IE 完全対応 10Opera ? Safari 完全対応 5.1WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Kurmanji (kmr, kmr-*)Chrome ? Edge ? Firefox 完全対応 8IE 未対応 なしOpera ? Safari 未対応 なしWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Latin (la, la-*)Chrome 完全対応 ありEdge ? Firefox 完全対応 8IE 未対応 なしOpera 完全対応 44Safari 未対応 なしWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile ? Firefox Android ? Opera Android 完全対応 44Safari iOS ? Samsung Internet Android 完全対応 あり
Hyphenation dictionary for Lithuanian (lt, lt-*)Chrome ? Edge ? Firefox 完全対応 8IE 未対応 なしOpera ? Safari 未対応 なしWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Mongolian (mn, mn-*)Chrome ? Edge ? Firefox 完全対応 8IE 未対応 なしOpera ? Safari 未対応 なしWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Norwegian (Bokmål) (no, no-*, nb, nb-*)Chrome ? Edge ? Firefox 完全対応 8IE 完全対応 10Opera ? Safari 完全対応 5.1WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Norwegian (Nynorsk) (nn, nn-*)Chrome ? Edge ? Firefox 完全対応 8IE 完全対応 10Opera ? Safari 未対応 なしWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Polish (pl, pl-*)Chrome ? Edge ? Firefox 完全対応 31IE 完全対応 10Opera ? Safari 完全対応 9.1WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Portuguese (pt, pt-*)Chrome ? Edge ? Firefox 完全対応 8IE 完全対応 10Opera ? Safari 完全対応 9.1WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Brazilian Portuguese (pt-BR)Chrome ? Edge ? Firefox 完全対応 8
補足
完全対応 8
補足
補足 For Brazilian Portuguese, Firefox uses a Portuguese dictionary.
IE 完全対応 10Opera ? Safari 未対応 なしWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Russian (ru, ru-*)Chrome ? Edge ? Firefox 完全対応 8IE 完全対応 10Opera ? Safari 完全対応 5.1WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Slovenian (sl, sl-*)Chrome ? Edge ? Firefox 完全対応 8IE 未対応 なしOpera ? Safari 未対応 なしWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Spanish (es, es-*)Chrome ? Edge ? Firefox 完全対応 8IE 完全対応 10Opera ? Safari 完全対応 5.1WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Swedish (sv, sv-*)Chrome ? Edge ? Firefox 完全対応 8IE 完全対応 10Opera ? Safari 完全対応 5.1WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Turkish (tr, tr-*)Chrome ? Edge ? Firefox 完全対応 9IE 完全対応 10Opera ? Safari 完全対応 5.1WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Ukrainian (uk, uk-*)Chrome ? Edge ? Firefox 完全対応 9IE 未対応 なしOpera ? Safari 完全対応 9.1WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Upper Sorbian (hsb, hsb-*)Chrome ? Edge ? Firefox 完全対応 8IE 未対応 なしOpera ? Safari 未対応 なしWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Welsh (cy, cy-*)Chrome ? Edge ? Firefox 完全対応 8IE 未対応 なしOpera ? Safari 未対応 なしWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for English (en, en-*)Chrome 完全対応 55Edge ? Firefox 完全対応 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 完全対応 55Edge Mobile ? Firefox Android ? Opera Android 完全対応 44Safari iOS ? Samsung Internet Android 完全対応 6.0

凡例

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

関連情報

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

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