text-wrap: pretty
text-wrap: pretty はブラウザにテキストの改行位置を最適化するよう指示し、孤立した短い最終行（ウィドウ）を防ぎます。通常の貪欲アルゴリズムよりも計算コストが高いですが、見出しや段落の見た目を改善します。主に見出しや短いテキストブロックでの使用が推奨されます。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
css.properties.text-wrap-style.pretty | 130 | 130 | | 26 | 130 | 26 |
| CSS プロパティ | ||||||
pretty | 117 | 117 | | 26 | 117 | 26 |
基本構文
CSS
h1, h2, h3 {
text-wrap: pretty;
}ライブデモ
実務での使いどころ
-
見出しの美しい折り返し
見出しテキストが複数行に折り返される際に、最終行が極端に短くならないよう改行位置を最適化します。
注意点
- パフォーマンスへの影響があるため、本文全体への適用は避け、見出しなど限定的な要素に使用してください。Firefox ではまだサポートされていません。
アクセシビリティ
- テキストの折り返し最適化は視覚的な改善であり、コンテンツの意味やスクリーンリーダーの読み上げには影響しません。