CSS Reference

text-wrap

テキストを折り返す方法を一括指定する

text-wrap プロパティは、text-wrap-mode、および text-wrap-style プロパティの一括指定プロパティです。ユーザーエージェントが制御する折り返し（自動折り返し）の方法を指定します。

指定できる値は下記の通りです。

wrap テキストは許可された自動折り返し機会（soft wrap opportunity）において、行をまたいで折り返しされます。これにより、インライン軸のオーバーフローを最小限に抑えることができます。（既定値）
nowrap テキストは行をまたいで折り返しされません。ブロックコンテナに収まりきらないテキストは、そのままオーバーフローします。
auto 自動折り返し機会（soft wrap opportunity）の中から、どこで改行するかを選択する具体的なアルゴリズムは、ユーザーエージェントによって決定されます。ユーザーエージェントは、balance のようにすべての行を（最後の行を含めて）均等にすることを試みてはならないと仕様では定められています。この値は、ユーザーエージェントが好む（あるいは最も Web に適合する）折り返しアルゴリズムを選択します。
balance auto よりも良いバランスが可能な場合、各行ボックスに残っているスペースを均等にするように改行位置が選択されます。仕様上は、text-wrap が auto に設定されていた場合の行ボックス数と同じになることが要求されています。また、処理の負荷を考慮して、行数が多い場合は、auto として扱ってもよいとされているため、例えば長い文章のすべてに対して balance を指定しても無視される場合があります。
stable テキストを編集するときにカーソルより前の内容が安定するように、改行を決定するときにそれ以降の行の内容を考慮しないように指定します。それ以外は auto と同等です。
pretty ユーザーエージェントが速度よりもレイアウトを優先するように指定し、改行を決定するときに複数行を考慮することを期待します。それ以外は auto と同等です。

なお、stable、pretty 値については、現時点でブラウザサポートの足並みがそろっていないため、使用する場合は注意が必要です。

text-wrapの仕様

初期値
  • wrap
対象となる要素
  • テキスト、およびインライン整形文脈を確立するブロックコンテナ
継承
  • あり

text-wrapのサンプルソース

h1 {
  text-wrap: balance;
}

主要ブラウザの対応

IE11 ×
Edge（EdgeHTML） ×
Edge（Chromium） ○
Chrome ○
Firefox ○
Safari ○
iOS Safari ○
Android Chrome ○

関連するプロパティ

仕様書

用途から CSS プロパティやセレクタを探す

用途から CSS プロパティやセレクタを逆引きできます。

対応ブラウザから CSS プロパティやセレクタを探す

対応ブラウザから CSS プロパティやセレクタを逆引きできます。

Edge（EdgeHTML）
Edge（Chromium）
Firefox
Chrome
Safari
iOS Safari
Android Chrome