LoginSignup
7
7

More than 3 years have passed since last update.

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

Last updated at Posted at 2019-07-26

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

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

7
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
7