Webページ内に長い英数字やURLがあると、スマホ表示や狭いカラムで文字がはみ出してしまうことがあります。とくに商品コード、ファイル名、長いリンク先URLなどは、途中で改行されずに横スクロールの原因になりやすいです。CSSを使えば、こうした文字列を自然に折り返して、レイアウト崩れを防げます。
長い文字列がはみ出す原因
通常のテキストは、スペースや改行の位置で折り返されます。しかし、英数字の連続やURLのような文字列は、途中に区切りがないため、ブラウザが「ここで折り返してよい」と判断しにくいことがあります。その結果、親要素の幅を超えて表示される場合があります。
たとえば、次のような文字列は注意が必要です。
- 長いURL
- ハイフンの少ない商品コード
- 連続した英数字のID
- メールアドレス
まずはoverflow-wrapを使う
長い英数字やURLを折り返したいときは、まず overflow-wrap を使うのが基本です。現在は overflow-wrap: anywhere; や overflow-wrap: break-word; を使う方法がよく利用されます。
.text {
overflow-wrap: anywhere;
}これを指定すると、必要に応じて単語の途中でも折り返されます。特にURLのような長い文字列に有効です。
break-wordとの違い
overflow-wrap: break-word; でも折り返しはできますが、仕様上の扱いが少し異なります。一般的には、より柔軟に折り返したい場合は anywhere を使うと考えると分かりやすいです。古いブラウザとの互換性を気にする場合は、両方の考え方を知っておくと安心です。
.text {
overflow-wrap: break-word;
}word-breakは使い方に注意する
word-break でも折り返しを制御できますが、英単語まで不自然に分割されることがあるため、使い方には注意が必要です。日本語の文章よりも、英数字の連続を優先して折り返したいときに検討します。
.text {
word-break: break-all;
}この設定は強力ですが、見た目が不自然になりやすいので、通常は overflow-wrap を優先し、どうしても必要な場面だけ word-break を使うのがおすすめです。
URLやコード表示に使いやすい実例
実際のWeb制作では、記事本文のURL、APIのエンドポイント、コードの説明文などに適用することが多いです。次のようなHTMLとCSSで、長い文字列がはみ出さないようにできます。
<p class="text">
https://example.com/very-long-url-that-should-wrap-properly-in-a-small-container
</p>
<p class="text">
ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ
</p>.text {
overflow-wrap: anywhere;
word-break: normal;
}このようにしておくと、画面幅が狭い場合でも文字列が親要素の内側で折り返されやすくなります。word-break: normal; を明示しておくと、必要以上に分割されるのを避けやすくなります。
preタグ内の長い文字列も対策が必要
コード例やログの表示で <pre> を使う場合も、長い文字列が横にはみ出すことがあります。その場合は white-space の設定と組み合わせて調整します。
.code-block {
white-space: pre-wrap;
overflow-wrap: anywhere;
}pre-wrap は改行を残したまま折り返せるため、長いURLやコードの表示に向いています。ただし、コードの見た目を厳密に保ちたい場合は、折り返しよりも横スクロールを許可する設計のほうが適していることもあります。
まとめ
長い英数字やURLがはみ出す問題は、overflow-wrap を使うことで解決しやすくなります。基本は overflow-wrap: anywhere; を試し、必要に応じて break-word や word-break を使い分けるとよいでしょう。特にスマホ対応では、文字列の折り返し設定を入れておくことで、レイアウト崩れをかなり防げます。
