Limited support 注意が必要。一部のブラウザのみ対応。プロダクション利用は慎重に判断すること。

word-break: auto-phrase

word-break: auto-phrase は日本語や中国語などのCJKテキストにおいて、単語やフレーズの自然な区切りで改行を行う機能です。従来のCJKテキストでは任意の文字間で改行されていましたが、この値により意味のまとまりを保った改行が可能になります。日本語の読みやすさを大幅に向上させます。

CJK改行フレーズ区切り

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.properties.word-break.auto-phrase
実験的
119
119
119
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
実装メモ
  • この値は、「lang="ja"」が指定されている場合にのみ適用されます。 この値は他のロケールには影響しません。
注釈 1件
実装メモ
  • この値は、「lang="ja"」が指定されている場合にのみ適用されます。 この値は他のロケールには影響しません。
注釈 1件
実装メモ
  • この値は、「lang="ja"」が指定されている場合にのみ適用されます。 この値は他のロケールには影響しません。

基本構文

CSS 
.japanese-text {
  word-break: auto-phrase;
}

ライブデモ

auto-phrase

CSS Auto-phrase demo.

プレビュー全画面表示

normal

CSS Normal demo.

プレビュー全画面表示

break-all

CSS Break-all demo.

プレビュー全画面表示

実務での使いどころ

  • 日本語テキストの自然な改行

    日本語のテキストを単語やフレーズの区切りで改行し、文中の不自然な位置での改行を防止します。

注意点

  • Chrome/Edgeのみのサポートであり、ブラウザのフレーズ解析精度はテキストの内容によって異なります。

アクセシビリティ

  • 自然なフレーズ区切りでの改行は、テキストの読みやすさを向上させ、認知負荷を軽減します。

参考リンク