overflow-wrap と word-break — 表セルや Markdown の表で幅と改行が決まる理由

  • CSS
  • overflow-wrap
  • word-break
  • table
  • Markdown

長い URL や英単語が入った表セルでは、どこで改行するかと列がどれだけ広がるかがセットで問題になることが多いです。ここでは overflow-wrap / word-wrap、word-break（とくに keep-all）、HTML の th / td、そして Markdown の表記法まで、一つの流れで整理します。

仕様の細部は MDN の overflow-wrap および word-break で確認してください。

overflow-wrap と word-wrap は同じ役割

どちらも、折り返しにくい連続文字（長い URL や長い英単語など）を、必要なら行の途中で切ってはみ出しを防ぐかを決めます。

  • overflow-wrap … CSS Text Module でいう正式なプロパティ名。
  • word-wrap … 歴史的な別名（エイリアス）。ブラウザは overflow-wrap と同じものとして扱います。

実務では overflow-wrap を書くほうが無難です。

代表値は次のイメージです。

値ざっくりした意味
normal（初期値）通常の折り返し。単語の途中では折りにくく、はみ出すことがある。
break-word行に収まらないとき、単語の途中でも改行してはみ出しを抑えやすい。

word-break は、主に CJK とラテン文字の改行ルールを変える用途が多く、レイヤーが少し異なります。「長い URL を枠内に収めたい」なら、まず overflow-wrap: break-word を検討する、という整理がよく使われます。

word-break: keep-all は主に CJK 向け

keep-all は、**中国語・日本語・韓国語（CJK）**のテキストで、表意文字同士のあいだを細かく切りすぎない方向の指定です。

  • 英数字だけのセルでは、多くの環境で word-break: normal と同様に扱われやすいです。
  • 日本語だけの段落では、normal との見た目の差が小さいことが多いです。
  • 中国語・韓国語では、列幅が狭いときに改行位置や行数が変わりやすい、という整理になります。

長い URL だけを問題にしているなら、keep-all だけでは足りず、overflow-wrap: break-word など別プロパティで補うことが多いです。

th / td では「列幅」とセットで考える

セルに overflow-wrap や word-break を書くとき、テーブル特有の魔法はありません。効くのはあくまでセル内のテキストの改行です。

一方で列の幅は別の要因と強く結びつきます。

  • 多くの場合、幅は 「各セル」ではなく「列」 として決まり、同じ列の th と td は同じ列幅を共有します（colspan などは例外扱い）。
  • table-layout: auto（初期値） … 内容（特に改行しにくい文字列）が列の最小幅を押し上げ、列が横に伸びやすいです。
  • table-layout: fixed とテーブル／列の width … 幅の上限がはっきりし、折り返し指定の効果が見えやすいです。
  • white-space: nowrap が当たっていると、折り返し系が効かないことがあります。

th と td でプロパティの意味が変わるわけではありません。見た目の差は、th に font-weight や text-align が当たっているなど、別スタイルの影響として説明するのが筋です。

Markdown の表 — ハイフンの本数は列幅に効かない

GitHub Flavored Markdown などでは、次のように パイプとハイフン行で表を書きます。

| 列A | 列B |
| --- | --- |
| 1   | 2   |

ここで重要なのは、Markdown には「列幅をピクセルで指定する」標準構文がないことです。レンダリング後は HTML の <table> になり、サイトやビューアの CSS とブラウザの表レイアウトで幅が決まります。

区切り行を次のようにしても、列幅は通常は変わりません。

| a | b |
| - | ---------------- |
| 1 | 2 |

- の本数は 「区切り行として有効かどうか」のための記号であり、「左列は狭く、右列は広く」といった幅指定には使われません。

「中途半端な改行を減らしたい」ときの normal + keep-all

表セルで、次のように指定することがあります。

th,
td {
  overflow-wrap: normal;
  word-break: keep-all;
}

狙いはおおよそ次のとおりです。

  • overflow-wrap: normal … 長い英数字や URL を、無理に途中改行しない方向（代わりにはみ出しや列の拡張がありうる）。
  • word-break: keep-all … CJK で細かすぎる改行を抑えたいときに、とくに 中国語・韓国語で検討価値があります。

ただし 日本語だけの表では、keep-all の効果は限定的になりやすく、英語の単語途中の見た目までこの2つだけで揃えるのは難しいこともあります。lang、実データ、列幅、ほかの CSS（white-space や table-layout など）とあわせて、実画面で確認するのが確実です。

まとめ

  • overflow-wrap と word-wrap は同義の別名関係。長いトークンの途中改行の可否を決める。
  • word-break: keep-all は CJK 向けの改行のされ方の調整で、英数字主体では差が出にくい。
  • th / td では**列幅・table-layout・white-space**と一体で結果が決まる。
  • Markdown の表の - の長さは列幅に影響しない。

表まわりの CSS を触るときは、「改行ルール」と「列がどれだけ狭くなれるか」を同時に見に行くと、原因の切り分けがしやすくなります。