テキストのレイアウト、特に行末や段落末のレイアウトは、ページの読みやすさや美しさに影響を与える可能性があります。CSS には、特定のユースケースを改善できるテキストの折り返しオプションがいくつか用意されています。
見出しなどの短いテキスト ブロックには、text-wrap: balance を使用します。このプロパティは、テキストをできるだけ均等に各行に分散させ、より対称的な外観を作成するようブラウザに指示します。
text-wrap: pretty CSS プロパティを使用すると、より高度な折り返しアルゴリズムを有効にして、本文のタイポグラフィの品質を向上させることができます。これは、特に「孤立した単語」（段落の最後の行にある単一の単語）を防ぎ、長いテキスト ブロックに対してより見栄えの良い「不揃いな」レイアウトを作成するように設計されています。
実装
1. テキスト要素を特定する:
text-wrap: balance には、見出しや表ヘッダーなどの短いテキスト ブロックを選択します。枠線や背景など、目に見えるボックスを持つ要素は避けてください。レイアウトに予期しない視覚的な空白領域が作成される可能性があります。
text-wrap: pretty には、孤立した単語（runt）や不適切な改行が最も目立つ、長いテキストを含む可能性のある要素を選択します。これには次の要素が含まれます。
<p><blockquote><li>- 長いテキストを含む可能性のあるその他の要素。
適切なラッピング方法の選択
| 条件 | text-wrap: balance |
text-wrap: pretty |
text-wrap: wrap（デフォルト） |
|---|---|---|---|
| 最適な用途 | 短いブロック（見出し、タイトル） | 長いブロック（段落、リスト） | パフォーマンス重視のコンテンツ |
| 視覚的な目標 | 対称的な行の長さ | 孤立行（「runt」）を避ける | 高速、標準ラッピング |
| ラインの制約 | 最大 6 ～ 10 行（アルゴリズムの上限） | 3 ～多数の回線に最適 | 制限なし |
| パフォーマンス費用 | 高: 二分探索アルゴリズム | 中: ルックバック アルゴリズム | 低: 標準の貪欲法アルゴリズム |
2. 選択したラッピングを適用する:
text-wrap: balance は、見出し（h1～h6）、サブ見出し、引用文など、短い複数行の要素に適用します。
/* Target specific heading elements for balanced wrapping */
h1, h2, h3, h4, h5, h6 {
/* Enables balanced line-breaking logic */
text-wrap: balance;
}
text-wrap: pretty を使用すると、段落の最後の数行を評価して最適な改行ポイントを見つける最適化されたアルゴリズムを有効にできます。
/* Apply to multi-line text blocks to prevent orphaned words */
p, blockquote, li, .pretty-text {
/* Enables pretty line-breaking logic for body copy */
text-wrap: pretty;
}
重要な制約とパフォーマンス
text-wrap: balance
- 行数の上限: ブラウザは、パフォーマンスを維持するためにバランスを調整する行数に上限を設けています（通常、Chromium では 6 行、Firefox では 10 行）。テキストがこの上限を超えると、ブラウザは標準の
wrap動作に戻ります。これらの上限を超える可能性のあるテキスト ブロックでは、text-wrap: balanceを使用しないでください。 - 対象アプリケーション:
text-wrap: balanceをグローバルに適用しないでください（例:* { text-wrap: balance; }）。ブラウザで使用される反復的な「バイナリ検索」アルゴリズムは、計算コストが高くなります。特定の短いテキスト要素にのみ使用してください。 - 幅との相互作用:
text-wrap: balanceはコンテナの幅（inline-size）を変更しません。その幅内でのテキストの折り返し方法にのみ影響します。これにより、コンテナの末尾に空きスペースが残る可能性があり、全幅のテキスト ブロックに依存するレイアウトに影響する可能性があります。
text-wrap: pretty
- パフォーマンスと品質: 必須:
text-wrap: prettyは、複数の行（通常は最後の 4 行）を評価して改行ポイントを最適化するため、デフォルトのwrap（greedy）アルゴリズムよりも計算コストが高くなります。ページに大量のテキスト コンテンツがある場合は、すべての要素にグローバルに適用することは避けてください。 - 複数行のテキストに最適:
prettyのメリットは、3 行以上の段落で最も顕著になります。短い 1 行のテキストにはほとんど影響しません。 - ブラウザ固有の動作: 実装の詳細はブラウザによって異なります。Chromium ベースのブラウザは通常、最後の 4 行に焦点を当てますが、他のエンジンは段落全体を評価する場合があります。
代替戦略
text-wrap: balance または text-wrap: pretty をサポートしていないブラウザでは、このプロパティは無視され、テキストはデフォルトの wrap の動作を使用して折り返されます。これは、標準のタイポグラフィにグレースフル デグラデーションするプログレッシブ エンハンスメントです。これにより、すべてのブラウザでコンテンツを完全に読み取れるようにしながら、サポートされているブラウザでは優れたエクスペリエンスを提供できます。
洗練されたテキスト レイアウトが要件となる重要なレイアウトでは、JavaScript ライブラリを使用します。ただし、この方法は処理が遅く、パフォーマンスの問題を引き起こす可能性があることに注意してください。