word-break
word-break は CSS のプロパティで、改行しなければテキストがコンテンツボックスからあふれる場合に、ブラウザーが改行を挿入するかどうかを指定します。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 15 | 3 | 18 | 2 | |
break-all | 1 | 12 | 15 | 3 | 18 | 2 |
keep-all | 44 | 12 | 15 | 9 | 44 | 9 |
normal | 1 | 12 | 15 | 3 | 18 | 2 |
基本構文
CSS
/* Allow line breaks between all characters */
.break-all {
word-break: break-all;
}
/* Keep words together in CJK text */
.keep-all {
word-break: keep-all;
}ライブデモ
実務での使いどころ
-
多言語テキスト対応
日本語・英語混在のテキストで適切な改行位置を制御し、レイアウトの崩れを防ぐ。
注意点
- break-all は英単語の途中でも改行するため、英語テキストの可読性が低下する。overflow-wrap: break-word との使い分けが重要。
アクセシビリティ
- 不適切な改行位置は読みにくさにつながる。言語に応じた適切な値を選択すること。