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

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

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

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

 

Word-break

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

a{
   word-break: break-all;
}

 

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

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

Before

↓

After

 

まとめ

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

終わり。