Posted at

aタグ内のテキストに長いURLを入れると文字が折り返されないとき

aタグ内のテキストに長いURLを入れると文字が折り返されないときがある。

たとえば

<a href="http://www.test.co.jp/foooooooooo/baaaaaaaaaaaaaaa/restaurant/" target="_blank">

http://www.test.co.jp/foooooooooo/baaaaaaaaaaaaaaa/restaurant/
</a>

なんて指定したときに、aがもっているテキストは開業されずに親要素を突き抜けて、1行で表示される。


解決策

a {

word-wrap:break-word;
}

そんなときは上記のword-wrap:break-word;を指定する。


word-wrap:break-word;とは


break-word

anywhere の値と同様に、行内にその他の分割可能な位置がない場合、通常は分割可能でない単語が任意の場所で分割されますが、コンテンツの最小固有寸法を計算する時に、単語分割によって導入された折り返し可能位置が考慮されません。


引用元: https://developer.mozilla.org/ja/docs/Web/CSS/overflow-wrap

これで親要素を突き抜けずにいいかんじに改行が入る。