word-break
word-break は単語が行の端で収まらない場合の改行挙動を指定する。break-all はすべての文字間で改行を許可し、keep-all は CJK テキストで単語単位の改行を強制する。日本語と英語が混在するテキストで特に重要。
概要
word-break は単語が行の端で収まらない場合の改行挙動を指定する。break-all はすべての文字間で改行を許可し、keep-all は CJK テキストで単語単位の改行を強制する。日本語と英語が混在するテキストで特に重要。
対応ブラウザ
デスクトップ
Chrome 44+
Edge 12+
Safari 9+
Firefox 15+
モバイル
Chrome Android 44+
Safari iOS 9+
Firefox Android 15+
基本構文
CSS
/* すべての文字間で改行を許可 */
.break-all {
word-break: break-all;
}
/* CJK テキストの単語単位改行 */
.keep-all {
word-break: keep-all;
}実務での使いどころ
-
多言語テキスト対応
日本語・英語混在のテキストで適切な改行位置を制御し、レイアウトの崩れを防ぐ。
注意点
- break-all は英単語の途中でも改行するため、英語テキストの可読性が低下する。overflow-wrap: break-word との使い分けが重要。
アクセシビリティ
- 不適切な改行位置は読みにくさにつながる。言語に応じた適切な値を選択すること。