⚖️
text-wrap: balance
見出しテキストの均等な改行
Webタイポグラフィで見出しや短いテキストブロックの最終行に単語が1つだけ残る現象は視覚的にアンバランスです。text-wrap: balanceを適用するとブラウザが自動的に改行位置を調整し、各行の長さが可能な限り均等になるようにします。
特に見出し、引用文、キャプションなど短いテキストに効果的ですが、長い本文にはパフォーマンスコストがある場合があるため注意が必要です。
適用方法
1
見出し要素（h1〜h6）にtext-wrap: balanceを適用する
2
引用文、キャプションなど短いテキストブロックにも適用する
3
長い本文には適用せず見出しや短いテキストにのみ使用する
4
必要に応じてtext-wrap: prettyもテストする
メリット
- ✓ 1行のCSSでタイポグラフィ品質を大幅に改善できる
- ✓ レスポンシブレイアウトで自動適用されメンテナンス不要
デメリット
- ✗ 6行以上の長いテキストではパフォーマンスの問題がありうる
- ✗ 行の長さが意図と異なるように調整される場合がある
ユースケース
ニュースサイトやブログの記事見出しタイポグラフィ改善
ヒーローセクションの大型タイトルテキストのバランス調整