CSS Reference

text-wrap-style

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

text-wrap-style プロパティは、ユーザーエージェントが制御する折り返し（自動折り返し）について、どのように折り返すかを指定します。また、text-wrap 一括指定プロパティを使用して指定することも可能です。

折り返しが許可されている場合（text-wrap-mode: wrap; の場合）、下記の一覧から選択した単一のキーワードで指定します。

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

text-wrap-style プロパティは現時点でブラウザのサポートが進んでおらず、将来的にプロパティ名が変更される可能性もあるため、text-wrap プロパティを使用する方がよいでしょう。

text-wrap-styleの仕様

初期値
  • auto
対象となる要素
  • インライン整形文脈を確立するブロックコンテナ
継承
  • あり

text-wrap-styleのサンプルソース

h1 {
  text-wrap-style: 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