今回は、固定幅の要素内で、文字が横にはみ出させずに折り返したいときに、word-wrap: break-word と word-break: break-all を使うことが多いかと思います。body に記述して、すべての要素に適用するようにしていることも多いかと思います。

結局どっちがいいのか、ということを解決したいと思います。

↑こういうやつ

結論からお伝えすると word-wrap: break-word のみを使用し、部分的に word-break: break-all を使うことを推奨します。

word-wrap: break-word と word-break: break-all の2つのざっくりした違い

word-wrap: break-word（overflow-wrap: break-word）

• 単語があふれないように適切な位置で改行

word-break: break-all

• 問答無用で改行

word-wrap: break-word でダメな場合

「内容が定まるまで幅の決まらない要素」がある場合に word-wrap: break-word は効きません。

以下のような場合です（テーブルは、あふれはしませんが、固定している幅が広がってしまいます）。

display: inline-block で囲まれたラベル（バッジ）やボタン

テーブル

Flexbox（親要素が display: flex）

float や position: absolute での使用

よくある過ち

word-wrap: break-word が効かず、安易に word-break: break-all を使いがちになるのをよく見かけます。検索をすると、word-break: break-all で解決しようという記事が多いからだと思います。

各ブラウザの対応を調べてみた

表の見方：「○」は改行されるを意味します。「×」は改行されないことを意味します。「○ ×」の順番は「Edge」「IE11」「Chrome(Windows、Mac、Android)」「Firefox(Windows、Mac)」「Safari(Mac、iPhone)」。

未指定

	英数字の連続	「、。…」の連続	「、。…」の禁則処理
内容の幅が決まる要素	× × × × ×	× × × × ×	○ ○ ○ ○ ○
内容が定まるまで 幅の決まらない要素	× × × × ×	× × × × ×	○ ○ ○ ○ ○

word-wrap: break-word

	英数字の連続	「、。…」の連続	「、。…」の禁則処理
内容の幅が決まる要素	○ ○ ○ ○ ○	○ ○ ○ ○ ○	○ ○ ○ ○ ○
内容が定まるまで 幅の決まらない要素	× × × × ×	× × × × ×	○ ○ ○ ○ ○

word-break: break-all

	英数字の連続	「、。…」の連続	「、。…」の禁則処理
内容の幅が決まる要素	○ ○ ○ ○ ○	× × × ○ ○	○ ○ ○ × ×
内容が定まるまで 幅の決まらない要素	○ ○ ○ ○ ○	× × × ○ ○	○ ○ ○ × ×

こうして見てみると、word-break: break-all の禁則処理関連がまちまちですね。つまり、word-break: break-all さえやっていればいいというわけではないことがわかります。

英数字の連続の解決策

display: inline-block で囲まれたラベル（バッジ）やボタン

word-break: break-all を指定

テーブル

親要素に table-layout: fixed を指定

Flexbox

min-width や width を指定

float や position: absolute での使用

width を指定

「、。…」の連続の解決策

• 連続することが少ないため放置

「、。…」の禁則処理

• word-break: break-all; を「基本的に使用しない」ルールで大丈夫です。その上で、禁則処理の発生しないURL、ラベル、ボタン等に部分的に使用します。