overflow-wrapではみ出す半角英数字やURLを自動改行

URLなど半角英数字の長すぎて要素からはみ出てしまい、デザインが崩れてしまうことがあります。レスポンシブサイトだと、モバイルなど表示幅が狭いと突き抜けて見た目も悪いですよね。
それを回避するために、overflow-wrapを指定することで自動的に改行されます。

上記のようにoverflow-wrap:normal;(デフォルト値)では、長い半角英数文字だと要素からはみ出てしまいます。

.sample {
  overflow-wrap: anywhere;
}

細かい説明は省きますが、このような表示がされた場合はお試しください。

関連投稿:

CSSのみでテキストや画像にぼかし効果を付ける 【初心者の方向け】 Bootstrap4の使い方 カルーセル GPT-4を駆使したロゴデザインサービスのサービス提供を開始 【初心者の方向け】 Bootstrap4の使い方 タブの作成