text-wrap と overflow-wrap — 役割は別物

2つのプロパティ、2つの関心事

text-wrap と overflow-wrap（旧名 word-wrap）はよく混同されます。似て見えますが、別の問題を解決します。

• text-wrap は行分割の 戦略 を制御します：貪欲、バランス、最終行最適化、改行禁止。
• overflow-wrap は分割不能な文字列（長い URL、50文字の ID、ドイツ語の合成名詞）が、最後の手段として 単語の途中で分割可能か を制御します。

例：狭いカラム内の長い URL

<p>See https://very-long-subdomain.example.com/path/to/resource for details.</p>

200px のカラムでデフォルトCSSのままだと URL がコンテナをはみ出します。スペースがないからです。2つの解決策：

/* 案1: 分割不能な長い文字列を割る */
p {
  overflow-wrap: anywhere;
}

/* 案2: 他に手がない場合のみ割る */
p {
  overflow-wrap: break-word;
}

overflow-wrap の値

• normal（デフォルト）：スペースと明示的な改行ポイントでのみ分割。
• break-word：normal と同じだが、オーバーフローを起こす長い分割不能文字列も分割。
• anywhere：break-word と同じだが、min-content 計算にも影響を与える（flex/grid の項目がさらに縮められる）。

text-wrap との組み合わせ

両プロパティはきれいにレイヤーします：

article p {
  text-wrap: pretty;        /* 最終行をきれいに */
  overflow-wrap: anywhere;  /* URL は最終手段で分割 */
  hyphens: auto;            /* 言語に応じたハイフネーション許可 */
}

ブラウザの改行優先順位：

1. スペースで分割（デフォルト挙動）。
2. 言語に応じた位置にハイフン挿入（hyphens: auto）。
3. 分割不能文字列の途中で分割（overflow-wrap: anywhere）。

text-wrap: pretty はその後、上記3ルールが提供した改行候補の中から最終行を再最適化します。

text-wrap: nowrap と overflow-wrap が出会うとき

text-wrap: nowrap はブラウザに「これは絶対に分割するな」と指示するため、overflow-wrap を上書きします：

.btn {
  text-wrap: nowrap;
  overflow-wrap: anywhere; /* 無視される */
}

ボタンラベルは1行に留まり、長すぎればコンテナをはみ出します。これを処理するには代わりに text-overflow: ellipsis を使ってください。