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
これで親要素を突き抜けずにいいかんじに改行が入る。