長いURLがはみ出すのを防ぐCSS

スマホでおもむろに投稿した記事をみていたら、長いURLが枠からはみ出していることに気がつきました。

え〜困ったなぁと。。(´・ω・)

なんとか解決したのでその方法をメモします。

 

Word-break

はみ出して欲しくない要素に下記CSSを適用します。

a{
   word-break: break-all;
}

 

親要素に適用すると色々楽チンですね。

こんな感じに修正されました。

Before

After

 

まとめ

長いURLがはみ出す時はword-break構文を使いましょう。

終わり。

コメントを残す

Your email address will not be published. Required fields are marked *

*

This site uses Akismet to reduce spam. Learn how your comment data is processed.