CSS 半角英数の連続文字が折り返すようにする

半角英数が連続した文字(例えばURLや、ハッシュ値など)を表示すると、枠からはみ出てしまう事があります。

その対策として、

word-wrap: break-word;

と、

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;を使ったほうがいいんじゃないか、ということになります。こんなかんじで。

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 が効かないことがあります。

<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要素は、要素内に合わせてサイズが決まるため、どこで折り返すか決められない、ということのようです。
つまり、『幅に合わせて折り返す』と、『内容に合わせて幅を決める』、という2つの機能が、矛盾というか、どっちつかずになってしまう。という。

 

で、こんどは word-wrapではなく、word-break: break-all; をtd要素に指定してやると。 

<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を使いたい!」というときはどうすればいいか、というと、こんな感じ。

<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

0
  • このエントリーをはてなブックマークに追加