Widely available 条件付きOK。言語によって辞書の品質に差がある。英語やドイツ語では良好に動作するが、日本語では効果が限定的。

hyphens (CSS Hyphenation)

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

テキスト改行

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
hyphens
55
79
43
17
55
17
auto

「自動」値
88
88
6
5.1
55
4.2
language afrikaans

アフリカーンス語のハイフネーション辞書 (af、af-*)
112
112
8
112
language albanian

アルバニア語のハイフネーション辞書 (sq、sq-*)
112
112
112
language amharic

アフマル語のハイフネーション辞書 (am、am-*)
112
112
112
language armenian

アルメニア語のハイフネーション辞書 (hy、hy-*)
87
87
87
language assamese

アッサム語のハイフネーション辞書 (as、as-*)
87
87
87
language basque

バスク語のハイフネーション辞書 (be、be-*)
87
87
87
language belarusian

ベラルーシ語のハイフネーション辞書 (be、be-*)
87
87
87
language bengali

ベンガル語のハイフネーション辞書 (bn、bn-*)
87
87
87
language bosnian

ボスニア語、セルビア語、セルボクロアチア語のハイフネーション辞書 (sh、sh-*、sr、sr-*、bs、bs-*)
8
language bulgarian

ブルガリア語のハイフネーション辞書 (bg、bg-*)
87
87
8
87
language catalan

カタロニア語のハイフネーション辞書 (ca, ca-*)
8
5.1
5
language croatian

クロアチア語のハイフネーション辞書 (hr、hr-*)
87
87
8
9.1
87
9.3
language cyrillic mongolian

モンゴル語 (キリル文字) のハイフネーション辞書 (mn-cyrl、mn-cyrl-*)
87
87
87
language czech

チェコ語のハイフネーション辞書 (cs、cs-*)
112
112
130
9.1
112
9.3
language danish

デンマーク語のハイフネーション辞書 (da、da-*)
87
87
8
5.1
87
5
language dutch

オランダ語のハイフネーション辞書 (nl、nl-*)
112
112
8
5.1
112
5
language english

英語のハイフネーション辞書 (en、en-*)
55
12
6
5.1
55
5
language esperanto

エスペラント語のハイフネーション辞書 (eo、eo-*)
8
language estonian

エストニア語のハイフネーション辞書 (et、et-*)
87
87
8
87
language ethiopic script mul

エチオピア文字のハイフネーション辞書 (mul-ethi、mul-ethi-*)
112
112
112
language ethiopic script und

エチオピア文字のハイフネーション辞書 (und-ethi、und-ethi-*)
87
87
87
language finnish

フィンランド語のハイフネーション辞書 (fi、fi-*)
8
9.1
9.3
language french

フランス語のハイフネーション辞書 (fr、fr-*)
87
87
8
5.1
87
5
language galician

ガリシア語のハイフネーション辞書 (gl、gl-*)
112
112
9
112
language georgian

グルジア語のハイフネーション辞書 (ka、ka-*)
112
112
112
language german reformed orthography

ドイツ語のハイフネーション辞書、1996 年の改革正書法 (de、de-1996、de-DE、de-AT、de-*)
87
87
8
5.1
87
5
language german swiss orthography

ドイツ語、スイス正書法のハイフネーション辞書 (de-CH、de-CH-*)
87
87
8
87
language german traditional orthography

ドイツ語、1901 年の伝統的な正書法のハイフネーション辞書 (de-1901、de-AT-1901、de-DE-1901)
87
87
8
87
language gujarati

グジャラート語のハイフネーション辞書 (gu、gu-*)
87
87
87
language hindi

ヒンディー語のハイフネーション辞書 (hi、hi-*)
87
87
87
language hungarian

ハンガリー語のハイフネーション辞書 (hu、hu-*)
87
87
9
9.1
87
9.3
language icelandic

アイスランド語のハイフネーション辞書 (is、is-*)
8
language interlingua

インターリングアのハイフネーション辞書 (ia、ia-*)
8
language irish

アイルランド語のハイフネーション辞書 (ga、ga-*)
87
87
87
language italian

イタリア語のハイフネーション辞書 (it、it-*)
112
112
9
5.1
112
5
language kannada

カンナダ語のハイフネーション辞書 (kn、kn-*)
87
87
87
language kurmanji

クルマンジのハイフネーション辞書 (kmr、kmr-*)
8
language latin

ラテン語のハイフネーション辞書 (la、la-*)
87
87
8
87
language latvian

ラトビア語のハイフネーション辞書 (lv、lv-*)
112
112
112
language lithuanian

リトアニア語のハイフネーション辞書 (lt、lt-*)
112
112
8
112
language malayalam

マラヤーラム語のハイフネーション辞書 (ml、ml-*)
87
87
87
language marathi

マラーティー語のハイフネーション辞書 (mr、mr-*)
87
87
87
language modern greek

現代ギリシャ語のハイフネーション辞書 (el、el-*)
112
112
112
language mongolian

モンゴル語の​​ハイフネーション辞書 (mn、mn-*)
8
language norwegian nn

ノルウェー語 (ニーノシュク) のハイフネーション辞書 (nn、nn-*)
87
87
8
87
5
language norwegian no

ノルウェー語 (ブークモール) のハイフネーション辞書 (no、no-*、nb、nb-*)
87
87
8
5.1
87
5
language old slavonic

古スラヴ語のハイフネーション辞書 (cu、cu-*)
87
87
87
language oriya

Oriya (または、or-*) のハイフネーション辞書
87
87
87
language polish

ポーランド語のハイフネーション辞書 (pl、pl-*)
31
9.1
9.3
language portuguese

ポルトガル語のハイフネーション辞書 (pt、pt-*)
87
87
8
9.1
87
9.3
language punjabi

パンジャブ語/パンジャブ語のハイフネーション辞書 (pa、pa-*)
87
87
87
language russian

ロシア語のハイフネーション辞書 (ru、ru-*)
112
112
8
5.1
112
5
language slovak

スロバキア語のハイフネーション辞書 (sk、sk-*)
112
112
130
112
language slovenian

スロベニア語のハイフネーション辞書 (sl、sl-*)
87
87
8
87
language spanish

スペイン語のハイフネーション辞書 (es、es-*)
87
87
8
5.1
87
5
language swedish

スウェーデン語のハイフネーション辞書 (sv、sv-*)
112
112
8
5.1
112
5
language tamil

タミル語のハイフネーション辞書 (ta、ta-*)
87
87
87
language telugu

テルグ語のハイフネーション辞書 (te、te-*)
87
87
87
language turkish

トルコ語のハイフネーション辞書 (tr、tr-*)
9
5.1
5
language turkmen

トルクメン語のハイフネーション辞書 (tk、tk-*)
87
87
87
language ukrainian

ウクライナ語のハイフネーション辞書 (英国、英国-*)
112
112
9
9.1
112
9.3
language upper sorbian

高ソルブ語のハイフネーション辞書 (hsb、hsb-*)
8
language welsh

ウェールズ語のハイフネーション辞書 (cy、cy-*)
87
87
8
87
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (13)
注釈 5件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (79)
  • ベンダープレフィックス付きで対応: -ms- (12)
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (79)
実装メモ
  • 指定された言語が基盤となる OS の言語と同じ場合にのみ機能します。
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -moz- (6)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (5.1)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (18)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (4.2)
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (88)
実装メモ
  • macOSのみ対応。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (88)
実装メモ
  • macOSのみ対応。
注釈 1件
実装メモ
  • 英語の場合、Firefox は en-US 辞書を使用します
注釈 1件
実装メモ
  • 英語の場合、Safari は異なる en-GB 辞書と en-US 辞書を使用します。
注釈 1件
実装メモ
  • 英語の場合、iOS の Safari は異なる en-GB 辞書と en-US 辞書を使用します。

基本構文

CSS 
/* Automatic hyphenation */
p {
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* Manual hyphenation */
.manual {
  hyphens: manual;
}

ライブデモ

Auto(auto)

hyphens (CSS Hyphenation) Auto(auto) demo.

プレビュー全画面表示

Manual(manual)

hyphens (CSS Hyphenation) Manual(manual) demo.

プレビュー全画面表示

None(disabled)

hyphens (CSS Hyphenation) None(disabled) demo.

プレビュー全画面表示

実務での使いどころ

  • 狭いカラムのテキスト

    新聞やカードコンポーネントの狭い幅で、長い単語がはみ出すのを防ぎつつ自然な改行を実現する。

注意点

  • hyphens: auto は lang 属性に依存する。HTML 要素に正しい言語を指定すること。
  • ハイフネーション辞書はブラウザや言語によって異なるため、結果が環境で変わる可能性がある。

フォールバック戦略

CSS 
/* フォールバック */
p {
  overflow-wrap: break-word;
  hyphens: auto;
}

アクセシビリティ

  • ハイフンで分割された単語でも、スクリーンリーダーは元の単語として正しく読み上げる。

参考リンク