【実務・中級編】インライン要素内のテキスト折り返し制御 – HTML実践ガイド

今日は、中級エンジニアなら絶対に押さえておきたい、`word-break`、`overflow-wrap`（旧`word-wrap`）の挙動の裏側と、モダンな現場でのベストプラクティスを解説します。

—

ブラウザはどうやって「改行」を決めているのか

まず、根本的な話をしましょう。ブラウザはデフォルトで「単語の区切り」を探します。日本語（CJK言語）は文字単位で改行可能ですが、英語などのスペース区切りの言語は、単語単位で扱われるのが基本です。

ここで問題になるのが、「長いURL」や「長大な英単語」です。これらは「ひとつの単語」として認識されるため、コンテナの端に達しても、ブラウザは「よし、単語の途中で切っていいやつだな」と判断するまで、平気で枠外にはみ出します。

この挙動を制御するのが、以下の3つのプロパティです。

1. `word-break: break-all;`

これは「単語の途中でも容赦なく切る」という、かなり強引なアプローチです。

• メリット: どんなに長い英単語でも、領域内に強制的に収まる。
• デメリット: 読みやすさが犠牲になる。本来の単語の区切りに関係なく改行されるため、美しくない。

2. `overflow-wrap: break-word;` (旧 `word-wrap`)

これが現場の最適解です。

• 挙動: まず「単語単位」で折り返そうと試みる。それでも収まらない場合のみ、単語の途中で折り返す。
• 推奨理由: 自然な読みやすさを維持しつつ、レイアウト崩壊を確実に防げるため。

—

実践：現場で使えるベストプラクティス

多くのプロジェクトで採用されている、再利用可能なユーティリティクラスの構成例を紹介します。これをベースに、プロジェクトの要件に合わせて微調整してください。

/ 汎用的なテキスト制御用のクラス群 /

/ 1. 自然な折り返しを優先する (基本はこれ) /
.text-wrap-safe {
overflow-wrap: break-word; / 長い単語は必要に応じて折り返す /
word-wrap: break-word; / IE11などの古いブラウザ用フォールバック /
}

/ 2. 強制的に領域内に収める (URLやIDの表示用) /
.text-wrap-force {
word-break: break-all; / 容赦なく単語の途中でも切る /
}

/ 3. 絶対に改行させない (ヘッダーのメニュー項目など) /
.text-nowrap {
white-space: nowrap;
}

サンプルコード：HTMLでの適用