はみ出る「長い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」を試してみて下さい。
関連記事