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