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

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

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

.sample {
  overflow-wrap: anywhere;
}

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

- PR -

ニッチなテーマのイラスト素材投稿始めました。良かったら使ってください。
RU DESIGN/無料イラスト・フリー素材「イラストAC」

オリジナル絵本　Kindleにて出版
ナマケモノのふにゃまるちゃん

ドメイン取得は同じところで取得しておくと便利ですよ。
お名前.comは1円から購入(1年間)できるドメインがあるので、いろいろと便利で経済的です。