text-wrap: balance vs pretty — 並列比較

TL;DR

• balance: ブロック全体 を最適化し、行幅を均等にする。短文（1〜6行） に最適。見出し、カードタイトル、ツールチップに使う。
• pretty: 最終数行のみ を最適化してオーファンを防ぐ。長文（段落） に最適。本文、説明文に使う。

balance の仕組み

アルゴリズムはコンテナ幅に対する二分探索を使います。最大幅で自然に折り返した状態から始め、すべての折り返し行が同じくらいの長さになるまで実効幅を段階的に狭めます。結果として、すべての行がほぼ同じ幅 — 視覚的に対称な — ブロックになります。

コスト：改行候補数に対して O(n²)。これを抑えるためにブラウザは balance を6行までに制限します。それを超えると、プロパティは静かに無視されます。

pretty の仕組み

pretty は最初の数行はそのまま（デフォルトの貪欲法を使い）、末尾4行だけを再評価します。先読みしてオーファン（最終行の1単語）とウィドウ（短すぎる最終行）を避け、より良いハイフネーション候補を選びます。

コスト：定数 — 先読みウィンドウが固定なので、段落の長さに関わらないコスト。任意の長さのコンテンツに安全に適用できます。

視覚的比較

同じ文字列、280px コンテナ、18px フォント：

デフォルト wrap：

The quick brown fox jumps over the lazy dog
several times in
a row

balance：

The quick brown fox jumps over
the lazy dog several times in a row

pretty：

The quick brown fox jumps over the lazy dog
several times in a row

balance はほぼ同じ長さの行を作り、pretty は最初の行を貪欲のままにしつつ最終行のオーファン（"in / a row"）を回避していることに注目してください。

判断マトリクス

シナリオ	使うべき値
H1, H2, H3 見出し	balance
グリッド内のカードタイトル	balance
ツールチップ・ポップオーバー	balance（6行超なら pretty）
記事の段落	pretty
商品説明	pretty
モーダル見出し	balance
モーダル本文	pretty
ボタンラベル	nowrap
フォームのフィールドラベル	balance
フォームのヘルパーテキスト	balance
コードブロック	wrap（デフォルト）または nowrap

パフォーマンスの現実

典型的な UI テキスト（1ページに数百単語）では、balance も pretty も体感できないほど高速です。テキスト幅をアニメーションさせるか、毎フレーム数千個のテキストブロックを再レンダリングする場合だけパフォーマンスを気にしてください。