固定幅の要素内で、連続した英字をはみ出させずに折り返したいとき、次のプロパティを使うことが多いと思います。
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)
hogehogehogehogehogehoge
hogehogehogehogehogehoge
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
hogehogehogehogehogehoge
hogehogehogehogehogehoge
min-width
や width
を指定
float や position: absolute での使用
width
を指定
「、。…」の連続の解決策
ブラウザによって実装がまちまちですが、連続することが少ないため放置でもあまり問題ありません。
「、。…」の禁則処理
word-break: break-all;
★ を基本的に使用せず、word-wrap: break-word
◆だけで大丈夫です。その上で、禁則処理の発生しないURL、ラベル、ボタン等に部分的に word-break: break-all;
★ 使用します。