長い英数字が箱からはみ出す？overflow-wrapで折り返しを実験する

同じ文字列でも、内容幅は620pxと220px

空白のない長い英数字は、箱に幅を指定しても折り返さず、横にはみ出すことがあります。今回は220pxの箱に同じ英数字を入れ、overflow-wrap: normalとanywhereを比較しました。確認したChromeでは内容幅が620pxと220pxになり、anywhere側は箱の中で折り返しました。

620pxは今回の文字列と20pxの等幅書体で測った値です。端末の書体が違えば値は変わります。確認のポイントは、normalで内容幅が表示幅を超え、anywhereでは両方が一致したことです。

折り返しとnowrapを切り替える

1. 下の作例で「white-space: nowrapを加える」が未選択であることを確認します。
2. normal側を横へスクロールし、長い英数字が続いていることを見ます。
3. anywhere側では文字列が複数行になり、表示幅と内容幅がともに220pxになることを確認します。
4. nowrapへチェックを入れると、anywhere側も横にはみ出します。チェックを外すと折り返しに戻ります。

比較用のスクロール領域にはTabキーで移動できます。実際のカードでは、必要な改行を許す設定と組み合わせます。overflow-wrapの公式資料にあるanywhereの説明を基に、同じ文字列で試しました。

文字を削る処理ではない

overflow-wrapは表示上の改行を調整するCSSです。今回の切り替えで、入力文字列を短くしたり、途中へ空白を挿入したりはしていません。nowrapが指定されていれば、この例のようにanywhereだけでは折り返しません。

単語の切れ目を重視する本文、改行させたくない識別番号、URLなど、表示したい内容に合わせて選びます。日本語の禁則処理、ハイフン挿入、全ブラウザでの行位置は今回の検証範囲に含みません。

Gridの列自体が縮まない問題は別にあり、Gridの最小幅を比べる記事で扱っています。まず文字の折り返しと、親の幅の問題を分けて観察してください。作例のHTML・CSS・JavaScriptは自作でCC0です。