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

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

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

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

 

Word-break

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

a{
   word-break: break-all;
}

 

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

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

Before

After

 

まとめ

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

終わり。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください