Newly available 条件付きOK。主要ブラウザで対応済みだが、値ごとのサポート状況に差がある。balance と pretty のフォールバックを考慮すること。

text-wrap property

text-wrap は CSS の一括指定プロパティで、要素内のテキストの折り返し方法を制御します。様々な値により、次のことを制御します。

組版の改善、例えば見出しの行の長さのバランスの改善。

テキストの折り返しを完全にオフにする方法。

テキスト改行

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
text-wrap
114
114
121
17.4
114
17.4
text-wrap-mode

text-wrap-mode は CSS プロパティで、要素内のテキストを折り返すかどうかを制御します。様々な値で、ブロック要素のコンテンツを折り返す代替方法を提供します。また、text-wrap の一括指定または white-space の一括指定を使って設定したり、リセットしたりすることができます。
130
130
124
17.4
130
17.4
nowrap
130
130
124
17.4
130
17.4
wrap
130
130
124
17.4
130
17.4
text-wrap-style

text-wrap-style は CSS プロパティで、要素内のテキストをどのように折り返すかを制御します。様々な値で、ブロック要素のコンテンツを折り返す代替方法を提供します。また、text-wrap の一括指定を使って設定したり、リセットしたりすることができます。
130
130
124
17.5
130
17.5
auto
130
130
124
17.5
130
17.5
stable
130
130
124
17.5
130
17.5
nowrap
114
114
124
17.4
114
17.4
stable
130
130
121
17.5
130
17.5
wrap
114
114
124
17.4
114
17.4
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

CSS 
/* Basic text wrapping */
p {
  text-wrap: wrap;
}

/* Even line spacing */
h1 {
  text-wrap: balance;
}

/* Prevent isolated words */
.article p {
  text-wrap: pretty;
}

ライブデモ

wrap（通常）

text-wrap property の wrap（通常） パターンです。

プレビュー全画面表示

balance（均等化）

text-wrap property の balance（均等化） パターンです。

プレビュー全画面表示

pretty（最適化）

text-wrap property の pretty（最適化） パターンです。

プレビュー全画面表示

実務での使いどころ

  • 美しい見出しの折り返し

    balance を使って見出しの各行の幅を均等にし、視覚的なバランスを整える。

  • 本文テキストの最適化

    pretty を使って段落の最終行に 1 単語だけが残る（orphan）ことを防ぐ。

注意点

  • balance は短いテキスト（6行以下）に制限されるブラウザがある。長い段落には pretty を使うこと。
  • 非対応ブラウザでは通常の wrap として動作するため、致命的な問題は発生しない。

アクセシビリティ

  • 折り返しアルゴリズムの変更はテキストの読み順やスクリーンリーダーの読み上げに影響しない。

参考リンク