半角英数が連続した文字（例えばURLや、ハッシュ値など）を表示すると、枠からはみ出てしまう事があります。
その対策として、
|
1 |
word-wrap: break-word; |
と、
|
1 |
word-break: break-all; |
があります。
どっちも、連続した半角英数文字を折り返すかどうか。を指定するのですが、いったいどう違うんでしょう？
ってことで、整理。
word-wrap: break-word と word-break: break-all の違い
word-wrap: break-word; は、枠内に収まらない英単語の場合は単語の途中でも折り返しますが、 枠内に収まる限り、単語の途中では折り返さないようにします。
なので、たとえば、forという短い単語なら、よほど狭い枠でなければ、途中で折り返されることはありません。
一方、word-break: break-all; は、英単語の途中であっても、問答無用で折り返します。なので、右端でforのような短い単語の途中であっても、
fo
r
というように、折り返してしまいます。
とうことで、どちらかというと、単語が切れてしまわない、word-wrap: break-word;を使ったほうがいいんじゃないか、ということになります。こんなかんじで。
|
1 2 3 4 |
body { word-wrap: break-word; overflow-wrap: break-word; } |
と、ここで突然登場したoverflow-wrapですが、
これはword-wrapの別名でして、CSS3で採用される可能性があるそうなので、word-wrapと併記したほうがいいらしいです。
word-wrap: break-word が機能しない
でも、どういうわけか、th要素とか、td要素、display:table-cell指定要素などの中では、word-wrap が効かないことがあります。
|
1 2 3 4 |
<table><tr> <td style="word-wrap: break-word;"> eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</td> <td style="word-wrap: break-word;">aaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbb cccccccccccccccccccc dddddddddddddddddddd</td> </tr></table> |
↓こんな感じで、枠からはみ出てしまいます。
| eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee |
| aaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbb cccccccccccccccccccc dddddddddddddddddddd |
なんでそんなことになるかというと、table-cell要素は、要素内に合わせてサイズが決まるため、どこで折り返すか決められない、ということのようです。
つまり、『幅に合わせて折り返す』と、『内容に合わせて幅を決める』、という２つの機能が、矛盾というか、どっちつかずになってしまう。という。
で、こんどは word-wrapではなく、word-break: break-all; をtd要素に指定してやると。
|
1 2 3 4 |
<table><tr> <td style="word-break: break-all;">eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</td> <td style="word-break: break-all;">aaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbb cccccccccccccccccccc dddddddddddddddddddd</td> </tr></table> |
すんなり折り返すようになります。
↓連続文字中でも折り返されてます。
| eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee |
| aaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbb cccccccccccccccccccc dddddddddddddddddddd |
word-break: break-all; は、単語の途中でも気にすることなく折り返せばいいので、OKということなんでしょうか。
じゃ、「word-break: break-all;は英単語の途中で折り返されるので使いたくない。thやtd要素でもword-wrapを使いたい！」というときはどうすればいいか、というと、こんな感じ。
|
1 2 3 4 |
<table style="table-layout: fixed;"><tr> <td style="word-wrap: break-word;"> eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</td> <td style="word-wrap: break-word;">aaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbb cccccccccccccccccccc dddddddddddddddddddd</td> </tr></table> |
eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
| aaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbb cccccccccccccccccccc dddddddddddddddddddd |
table要素に、table-layout: fixed; を指定してやればいいみたいです。
ただし、table-layout: fixed; を指定すると、枠幅が自動調整されないので、widthを指定してやらないといけない場合もあります。
word-wrap を有効にしたかったら、その枠幅をはっきりさせてね。ってことですね。
参考になりました↓
https://w3g.jp/blog/confusing_word-break_word-wrap
