どうも7noteです。URLがはみ出ちゃってデザインが崩れた方必見。

こんな場面みたことありませんか？

枠より長い文字がはみ出てしまっています。
デザインが崩れてしまっているので、URLなどの長い文でも自動的に改行するように改良しましょう。

CSSでの修正方法

p {
  word-break: break-all;
}

たったこれ1行だけで解決できます。

結果

解説

これは英文の特徴なのですが、例えば「everyday」という単語が改行されて、

「～～～every（改行）
day.」

となっていたとします。
「everyday」と「every day」では「日常」と「毎日」とで意味が変わってしまいます。

このように意味が変わらないように、英語の単語の途中では改行されない仕組みになっています。
そのため、URLも1つの英単語と認識されてしまうので改行されずに枠からはみ出してしまうのです。

これを強制的に改行させるのが、word-break: break-all;となります。

まとめ

ブログを書くようなサイトを作る際に、「ブログの中にURLを貼り付けるとデザインが崩れる！」というようなシチュエーションが想定されます。
記事の投稿やブログ運営を自分以外の人にやってもらうサイトの場合は、本文の箇所にword-break: break-all;を入れておくと、ちょっとデキる開発者になれると思います。

使うユーザーが気持よく利用できるように設計するのもコーダーやフロントエンジニアの大切な仕事の1つかなと思います。