はみ出る「長いURL」を改行してレスポンシブにする方法

はみ出る「長いURL」をCSSで改行してレスポンシブにする方法を紹介します。

はみ出る「長いURL」をCSSでレスポンシブにする方法

指定した横幅を超えて、はみ出る「長いURL」をCSSで改行してレスポンシブにする方法を紹介します。Webサイトやブログで、「長いURL」が指定した横幅を超えてレイアウトが崩れた時に「CSS」で簡単に改行させてレスポンシブにすることができます。

長いURLは、CSSの「word-break」で改行させる！

とくにスマホ表示で見た時なんかに、はみ出る「長いURL」を発見する事が多いと思います。そんな時はCSSの「word-break」を使います。はみ出している要素にこのCSSを適応します。はみ出る「長いURL」の要素が「a」の場合は…

a{
   word-break: break-all;
}

こんな感じでCSSを適応させると、はみ出る「長いURL」が横幅に合わせて改行されてレスポンシブになります。「長いURL」が、横幅からはみ出してレイアウトが崩れていた場合はCSSの「word-break」を試してみて下さい。

関連記事