# word-break と overflow-wrap の違い

> はみ出し対策の第一選択はoverflow-wrap: break-word。word-break: break-allは英単語もぶつ切りにする強い指定で、表の詰め込みなど限定的な場面用です。

- URL: https://www.css-dictionary.com/compare/word-break-vs-overflow-wrap/

## 比較表

| 観点 | 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が正解です。

## それぞれの詳しい解説

- [word-break](https://www.css-dictionary.com/property/word-break.md)
- [overflow-wrap](https://www.css-dictionary.com/property/overflow-wrap.md)