【実務・中級編】word-breakとoverflow-wrapの使い分け – HTML実践ガイド

なぜ、その「長い文字列」はコンテナを突き破るのか？：word-break と overflow-wrap の正しい使い分け

現場でコーディングをしていると、必ず一度は頭を抱える問題がありますよね。「クライアントから送られてきたテストデータのURLが長すぎて、サイドバーを突き抜けている」「ユーザーが入力した謎の英単語の羅列でレイアウトが崩壊した」。

CSSの改行制御は、一見すると「どれを使っても似たような結果になる」と思われがちですが、実はブラウザのレンダリングエンジンが裏側でどう判断しているかを知っているかどうかで、UIの品質は大きく変わります。

今日は、中級エンジニアなら絶対に押さえておきたい `word-break` と `overflow-wrap`（旧 `word-wrap`）の境界線と、現場で迷わないための「最適解」を共有します。

—

1. そもそも、ブラウザはどう「改行」を判断しているのか？

ブラウザのデフォルト挙動は、「スペースやハイフンなどの区切り文字がある場所で改行する」というものです。これを「禁則処理」と呼びます。しかし、URLや長い英単語にはその「区切り」が存在しないため、ブラウザは「一行で表示しなければならない」という制約と「コンテナに収めなければならない」という制約の間でパニックを起こし、結果としてコンテナを突き抜けてしまいます。

この「突き抜け」を制御するためのプロパティがこの二つです。

word-break: break-all

「禁則処理を無視してでも、コンテナの端で強制的にぶった切る」という荒技です。

• 挙動: 単語の途中であっても、文字が端に到達した瞬間に改行します。
• 欠点: 読みやすさが犠牲になります。単語の途中で容赦なく改行が入るため、日本語の文脈や英文の可読性が極端に下がることがあります。

overflow-wrap: break-word

「基本は単語の途中で改行したくないが、どうしても収まりきらない時だけ単語の途中で改行を許容する」という、非常に紳士的な挙動です。

• 挙動: まずは単語の最後で改行を試みます。それでも収まらない場合のみ、やむを得ず単語を分割します。
• 利点: 基本的に読みやすさを維持したまま、レイアウト崩壊を防げます。

—

2. 現場のベストプラクティス：使い分けの判断基準

結論から言えば、基本は `overflow-wrap: break-word` 一択です。`word-break: break-all` は、どうしてもデザイン的に「文字を強制的に枠内に収めることが絶対条件（例：狭いテーブルのセルや、特定のラベル）」という極端な場合にのみ使用すべき「特効薬」だと考えてください。

実践的なスタイル定義

以下は、僕がプロジェクトで必ずと言っていいほど設定するリセットCSSの抜粋です。これをベースに、必要に応じて上書きしていくのが最も安全です。

/ インライン要素やテキストコンテナの基本設定 /
.text-container {
/

• 1. 可能な限り単語を維持する。
• 2. それでも無理なら単語を分割する。
• これが現在のCSSにおける「最も安全なデフォルト」です。

/
overflow-wrap: break-word;

/

• word-break: break-all を安易に使わない理由：
• 日本語と英語が混在する環境で、日本語まで不自然に改行されてしまうため。

/
}

/ 特定の狭いエリアや、URLリストなど「崩壊が許されない」場所だけに使用 /
.force-break {
/ 禁則処理を無視して強制的に改行させる /
word-break: break-all;
}

—

3. なぜ「インライン要素」でハマるのか？

`` や `` などのインライン要素で改行制御が効かない、という相談もよく受けます。これはCSSの仕様上、インライン要素には `width` が効かないため、コンテナの幅という「基準」が見えていないことが原因です。