長いURLがはみ出す？CSSの overflow-wrap: anywhere
スマホでページを確認したら、長いURLや英数字がカードからはみ出していた。そんなときに試したいのが overflow-wrap: anywhere; です。文章を切り捨てず、枠の中で折り返して表示できます。
長い文字列を、必要なときだけ折り返す
英単語や連続した英数字は、通常の改行位置が少ないため、狭い欄からはみ出すことがあります。anywhere は、通常の改行位置だけでは収まらない文字列を途中で折り返せる指定です。折り返し位置にハイフンが追加されることはありません。
.card-text {
overflow-wrap: anywhere;
}長いURLを載せる文章や、ユーザーが自由に入力するコメント欄などに向いています。実際の文章が入って初めて気づくレイアウト崩れを防ぐ、小さな保険になります。
HTMLと組み合わせた例
<p class="card-text">
https://example.com/abcdefghijklmnopqrstuvwxyz0123456789
</p>CSSを適用する先は、まず問題が起きている文章の領域に絞ると調整しやすいです。本文内のリンクにも継承されるので、リンクの表示文字列が長い場合にも役立ちます。
うまく折り返さないときの確認ポイント
対象に white-space: nowrap; が付いていると、改行が許可されません。折り返したい文章では、その指定を外すか white-space: normal; に戻して確認しましょう。
word-break: break-all; は英単語も積極的に途中で分割するため、英文の読みやすさに影響することがあります。「通常の改行位置を使い、長すぎる文字列だけ救いたい」場合は overflow-wrap: anywhere; が候補になります。
コード欄など、改行位置を保ちたい場所への一括指定は避け、スマホ幅と実際の長い文字列で表示を確認しておくと安心です。
