【CSS】URLやリンクのテキストが改行されずレイアウトが崩れた時の対処法

ブログなどを書いていて、リンクが付いたURLを記載する時に、コンテンツの幅をはみ出していたり、レイアウトが崩れてしまったという事を経験した事はありませんか？

今回はリンクテキストやURLが改行されず、コンテンツの幅を超えてレイアウトが崩れた時の対処法についてご紹介していきたいと思います！

URLが改行されない原因について

文字が長いURLなどのリンクテキストは、ブラウザが1つの単語として認識してしまっているため、改行がされず、コンテンツの幅を超えてしまう長さになり、レイアウトを崩すといった事がおこります。

日本語なら適度なところで改行がされるものでも、英語だとそうならないケースが多い傾向にあります。

長いURLやリンクテキストを改行させる方法

では、URLやリンクテキストを改行させる方法を見ていきましょう。

CSSでword-breakプロパティを付与する

URLやリンクテキストを改行させるには、以下のCSSを付与すると改行ができます。

p{
  word-break: break-all;
}

これで、URLやリンクテキストが改行されるようになります。
word-breakでは以下の3つの値がありますので、併せてご紹介していきます。

word-break:normal;
normalは、テキストの折り返しの指定をしないので、この値を使うと改行しないので注意しましょう。

word-break:keep-all;
keep-allでは、単語の切れ目で改行を行います。ですので文章の長さによっては改行されず、レイアウト崩れが起こってしまう可能性がありますので、注意しましょう。

word-break:break-all;
こちらは幅に合わせて改行がされます。今回のように指定した幅に合わせてURLやリンクテキストを改行させたい場合にはこの値をつかいましょう。

まとめ

URLやリンクのテキストが改行されずレイアウトが崩れた時の対処法についてご紹介いたしましたが、いかがだったでしょうか？

意外と簡単に対策ができますので、こうしたレイアウト崩れが起こった場合には是非参考にして頂けると幸いです！