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

この記事は【2022年7月23日】が最後の更新のため、記事の内容が古い可能性があります。

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

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

.sample {
  overflow-wrap: anywhere;
}

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

- PR -

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

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

ドメイン取得は同じところで取得しておくと便利ですよ。

応援・支援よろしくお願いいたします。サイト運営に使わせていただきます。

■BTC
1PPYM4493tNYVZuGxXnYLpVdKJXSwFagPQ
■MATIC
0xC75744667A7396DFF507cf44371A2CF0B6eEF03B
■ETH
0xC75744667A7396DFF507cf44371A2CF0B6eEF03B