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

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

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


関連記事


Written by

Videographer / Web Designer 動画編集・映像制作(Final Cut Pro X,YouTube)Webデザイン・HP制作(WordPress,SEO,アフィリエイト)一眼レフカメラ・ドローン(Vlog撮影,一眼動画撮影)などの情報を「松岡高宏」がブログで発信します。