text-wrap property
text-wrap は従来の white-space から折り返し制御を分離した新しいプロパティ。balance は各行の幅を均等にし、pretty は孤立語（orphan）を防ぐ最適化を行う。stable は編集可能なコンテンツでリフローを最小限にする。
概要
text-wrap は従来の white-space から折り返し制御を分離した新しいプロパティ。balance は各行の幅を均等にし、pretty は孤立語（orphan）を防ぐ最適化を行う。stable は編集可能なコンテンツでリフローを最小限にする。
対応ブラウザ
デスクトップ
Chrome 130+
Edge 130+
Safari 17.5+
Firefox 124+
モバイル
Chrome Android 130+
Safari iOS 17.5+
Firefox Android 124+
基本構文
CSS
/* 基本的な折り返し */
p {
text-wrap: wrap;
}
/* 行幅の均等化 */
h1 {
text-wrap: balance;
}
/* 孤立語の防止 */
.article p {
text-wrap: pretty;
}実務での使いどころ
-
美しい見出しの折り返し
balance を使って見出しの各行の幅を均等にし、視覚的なバランスを整える。
-
本文テキストの最適化
pretty を使って段落の最終行に 1 単語だけが残る（orphan）ことを防ぐ。
注意点
- balance は短いテキスト（6行以下）に制限されるブラウザがある。長い段落には pretty を使うこと。
- 非対応ブラウザでは通常の wrap として動作するため、致命的な問題は発生しない。
アクセシビリティ
- 折り返しアルゴリズムの変更はテキストの読み順やスクリーンリーダーの読み上げに影響しない。