CSS text-wrap プレイグラウンド

text-wrapは2023年に登場したCSSプロパティで、ブロック内テキストの折り返し方をブラウザに指示します。値はwrap（デフォルトの貪欲法）、nowrap（強制1行）、balance（行幅を均等化、見出し向け）、pretty（段落の最終数行を最適化して未亡人を防ぐ）、stable（ライブ編集時にも改行位置を安定化）の5種類です。これにより、これまで <wbr>、&nbsp;、JavaScriptライブラリで手動修正していた見出しのバランス調整がCSSだけで完結します。

balance はブロック全体を最適化し、折り返した各行の幅をほぼ均等にします。見出し・カードタイトル・ツールチップなど **1〜6行** 程度の短文に最適です。pretty は長めの段落の **最後の数行** だけを最適化し、未亡人（最終行に残る1単語）を防いでハイフネーションも改善します。見出しには balance、本文には pretty が原則です。内部的には balance が改行候補数に対して O(n²) と計算量が大きいため、ブラウザは6行程度までしか balance を効かせません。pretty は長文にもスケールするよう設計されています。

text-wrap: balance は Chrome 114（2023年5月）、Edge 114、Firefox 121（2023年12月）、Safari 17.5（2024年5月）で実装されました。text-wrap: pretty は新しめで Chrome 117（2023年9月）、Edge 117、Safari 17.5 で利用可能ですが、Firefox は2026年初頭時点でも未対応で、デフォルトの折り返しにフォールバックします。balance / pretty は常にプログレッシブエンハンスメントとして扱い、値が無視されてもレイアウトが破綻しないようにしてください。本ページ上部のサポートバナーは CSS.supports('text-wrap', 'pretty') を使って現在のブラウザがフォールバックするかをリアルタイムに警告します。

ラギネス（行頭・行末の凹凸）が目立つと素人っぽく見えるような短くて目立つテキストに最適です。具体的には H1・H2 見出し、グリッド内のカードタイトル、ヒーローのサブタイトル、モーダルタイトル、ツールチップ本文、2行に折り返るボタンラベル、フォーム入力上のラベルなど。逆に避けるべきは本文段落（代わりに pretty）、6行を超えるテキスト（ブラウザが balance を諦める）、頻繁にアニメーションするテキスト（毎フレーム再計算のコストがパフォーマンスを下げる）です。

あるが、限定的です。text-wrap: balance は改行候補数に対して O(n²) なので、ブラウザは折り返しを6行程度（Chrome デフォルトは6、Firefox は10）に制限し、それを超える場合は最適化をスキップします。text-wrap: pretty はかなり安価で、デフォルトでは段落の最後の4行だけを再評価するため、段落の長さに関わらずコストはほぼ一定です。静的コンテンツでは無視できる程度ですが、キーストロークやアニメーションフレームごとに再レイアウトされるコンテンツでは balance より pretty を選ぶか、見出し要素にだけ balance を適用してください。

text-wrap は **どこで** 改行できるかを制御し、他の3つは **どう単語を分割** するかを制御します。本文には hyphens: auto と text-wrap: pretty を組み合わせるのがベストです。pretty は未亡人を最小化するハイフネーション位置を選んでくれます。white-space: nowrap は古い時代の text-wrap: nowrap 相当で、今でも有効です。overflow-wrap: anywhere は、URL や長いIDなど分割不能な長い文字列を、text-wrap の値に関わらず単語の途中で改行する最後の砦です。4つは競合ではなく補完関係にあります。

はい。このプレイグラウンドは純粋なCSSとReactのステートだけでブラウザ内で完結します。テキスト、スライダーの値、生成されたCSSがサーバーに送信されることは一切ありません。ブラウザサポートバナーはローカルの CSS.supports() API を使っており、外部の機能検出サービスは利用しません。入力に紐づくアナリティクスもなく、一度読み込めばオフラインでも動作するため、未公開のドラフトコピーや未発表の製品名を貼り付けても痕跡を残しません。