text-wrap: pretty のブラウザフォールバック戦略

現在のサポート状況（2026年初頭）

プロパティ	Chrome	Edge	Safari	Firefox
text-wrap: nowrap	✅ 全バージョン	✅ 全バージョン	✅ 全バージョン	✅ 全バージョン
text-wrap: wrap	✅ 全バージョン	✅ 全バージョン	✅ 全バージョン	✅ 全バージョン
text-wrap: balance	✅ 114+	✅ 114+	✅ 17.5+	✅ 121+
text-wrap: pretty	✅ 117+	✅ 117+	✅ 17.5+	❌ 未対応
text-wrap: stable	✅ 121+	✅ 121+	✅ 17.5+	❌ 未対応

Firefox はグローバルブラウザシェアの3%程度ですが、技術系・アクセシビリティ意識の高い層・開発者コミュニティでは比率が上がります。無視はできません。

戦略 1: カスケードに任せる（推奨）

text-wrap: pretty は プログレッシブエンハンスメント で、未対応ブラウザはデフォルトの貪欲折り返しに静かにフォールバックします。デフォルト折り返しでデザインが成立するなら、ルールだけ書いてカスケードに任せましょう：

article p {
  text-wrap: pretty;
}

JavaScript も @supports もメンテも不要です。

戦略 2: 異なるフォールバックには @supports

未対応ブラウザに別スタイルを当てたい場合は @supports を使います：

article p {
  /* 全ブラウザのベースライン */
  hyphens: auto;
  line-height: 1.6;
}

@supports (text-wrap: pretty) {
  article p {
    text-wrap: pretty;
  }
}

@supports not (text-wrap: pretty) {
  article p {
    /* フォールバック: line-height を少し詰めて見栄えを補う */
    line-height: 1.55;
  }
}

戦略 3: JavaScript の機能検出

実行時の判断（稀）に：

const supportsPretty = CSS.supports('text-wrap', 'pretty');
const supportsBalance = CSS.supports('text-wrap', 'balance');

document.documentElement.classList.toggle('no-text-wrap-pretty', !supportsPretty);
document.documentElement.classList.toggle('no-text-wrap-balance', !supportsBalance);

その後 .no-text-wrap-pretty article p { ... } でスタイルを当てます。テキスト折り返しのために JS 駆動の分岐が本当に必要なケースはほぼありません。

古いブラウザとレガシーテクニック

本当に古いブラウザ（IE11、2020年以前の Safari など）では text-wrap は完全に無視されます。テキストはデフォルトの貪欲アルゴリズムで折り返されます — そのユーザーがずっと見てきた挙動です。それらの環境でピクセルパーフェクトな互換性が必要な場合（ほぼ不要）でない限り、Adam Mordecai 氏の Balance Text のような JS ライブラリを出荷する必要はありません。