word-wrap周りのベストプラクティスを考えてみた

固定幅の要素内で、連続した英字をはみ出させずに折り返したいとき、次のプロパティを使うことが多いと思います。

• word-wrap: break-word （または、overflow-wrap: break-word）
• word-break: break-all

↑こういうやつ

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

結論

• 基本的には 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★ で解決しようという記事が多いからだと思います。

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

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

未指定

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

word-wrap: break-word◆

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

word-break: break-all★

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

この表で理解いただきたいのは、word-break: break-all★ の禁則処理（句読点などが行頭に来ないようにする）関連がまちまちですし、結局「行頭にFirefoxとかSafariで確認したときに『、』が来る」事態になります。つまり、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;★ を基本的に使用せず、word-wrap: break-word◆だけで大丈夫です。その上で、禁則処理の発生しないURL、ラベル、ボタン等に部分的に word-break: break-all;★ 使用します。