比較記事一覧に戻る
word-break と overflow-wrap の違い
TL;DR — ひとことで言うと
はみ出し対策の第一選択はoverflow-wrap: break-word。word-break: break-allは英単語もぶつ切りにする強い指定で、表の詰め込みなど限定的な場面用です。
比較表
| 観点 | word-break | overflow-wrap |
|---|---|---|
| 折り返しの方針 | どの文字間で折り返せるかのルール自体を変える | 収まらない場合にのみ、単語の途中での折り返しを許可する |
| 英単語の扱い | break-allでは単語の可読性を無視してぶつ切りになる | 通常は単語境界を守り、はみ出す単語だけ途中で折る |
| 日本語への影響 | normalでも日本語は折り返される。auto-phraseで文節改行（Chrome限定） | 日本語にはほぼ影響なし（長い英数字列にだけ効く） |
| 典型用途 | セルにとにかく詰め込みたい表、等幅のログ表示 | コメント欄・チャット等、ユーザー入力の長いURL対策 |
使い分けの指針
まずoverflow-wrap: break-wordを試すのが原則です。flex/grid内で効かない場合はmin-width: 0を併用。それでも制御できない表のような場面で初めてword-break: break-allを検討します。日本語見出しの改行位置を整えたい場合は、別系統のword-break: auto-phraseやtext-wrapの領域です。
🤖 AIがよくやる取り違え
AIは「テキストがはみ出す」という相談に反射的にword-break: break-allを提案しがちですが、英単語の可読性を壊します。多くの場合overflow-wrap: break-wordが正解です。