text-wrap-style
Baseline 2024 * Newly available
Since October 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
* Some parts of this feature may have varying levels of support.
text-wrap-style は CSS プロパティで、要素内のテキストをどのように折り返すかを制御します。様々な値で、ブロック要素のコンテンツを折り返す代替方法を提供します。また、text-wrap の一括指定を使って設定したり、リセットしたりすることができます。
試してみましょう
text-wrap-style: auto; text-wrap-style: balance; text-wrap-style: pretty; text-wrap-style: stable; <section class="default-example" id="default-example"> <div class="whole-content-wrapper"> <p>Edit the text in the box:</p> <div class="transition-all" id="example-element"> <p contenteditable=""> Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem aut cum eum id quos est. </p> </div> </div> </section> .whole-content-wrapper { display: flex; flex-direction: column; align-items: center; width: 100%; } #example-element { border: 1px solid #c5c5c5; width: 250px; } 構文
/* キーワード値 */ text-wrap-style: auto; text-wrap-style: balance; text-wrap-style: pretty; text-wrap-style: stable; /* グローバル値 */ text-wrap-style: inherit; text-wrap-style: initial; text-wrap-style: revert; text-wrap-style: revert-layer; text-wrap-style: unset; 折り返しが許可されている場合（text-wrap-mode を参照）、text-wrap-style プロパティは下記の一覧から選択した単一のキーワードで指定します。
値
auto-
テキストは、ブラウザーにとって最もパフォーマンスの高い方法で折り返され、文字数を考慮して導かれるわけではありません。
balance-
テキストは、各行の文字数を最適にバランスをとる方法で折り返され、レイアウトの品質と読みやすさが向上します。文字を数えて複数の行にまたがるようにバランスをとるのはコンピューターに負荷がかかるため、この値は限られた行数（Chromium では 6 行以下、Firefox では 10 行以下）のテキストブロックにのみ対応しています。
pretty-
テキストは、速度よりも優れたレイアウトを優先する、より遅いアルゴリズムを使用して折り返されます。この例は、パフォーマンスよりも優れた組版が優先される本体コピーを意図しています（例えば、オルファンの数を最小に保つ必要がある場合など）。
stable-
テキストは、ユーザーがコンテンツを編集している際に、編集している行の前の行が固定され、テキスト全体が再配置されるのではなく、そのように折り返されます。
メモ: CSS テキストモジュールでは、 avoid-orphans 値を text-wrap-style プロパティに定義すると、最終行が過度に短くなることを避け、改行の決定を行う際にユーザーエージェントが複数の行を考慮することを期待しています。この値は、現時点ではどのブラウザーでも対応していません。
解説
コンテンツが折り返し可能な場合（それが既定でそうなっている場合）、コンテンツの折り返し方法に影響を与えることができるいくつかの選択肢があります。
text-wrap-style に選ぶ値は、スタイル設定に現れるテキストの行数、テキストが contenteditable かどうか、見た目を優先するかパフォーマンスを優先するかによって決まります。
スタイル設定されたコンテンツが見出し、キャプション、ブロック引用などの短い行数に限定される場合、 text-wrap-style: balance を追加することで、各行の文字数のバランスをとり、レイアウトの品質と読みやすさを向上させることができます。ブラウザーはこのプロパティが影響する行数を制限しているため、この値がパフォーマンスに与える影響はごくわずかです。
テキストの長い区間では、text-wrap-style: pretty を使用することができます。 pretty はパフォーマンスにマイナスの効果があるので、速度よりもレイアウトが重要な場合にのみ、長いテキストブロックに使用しましょう。
stable の値は、contenteditable であるコンテンツに使用すると、ユーザーの使い勝手が改善されます。この値は、ユーザーがテキストを編集しているとき、編集されている領域の前の行が安定したままであることを確実にします。
公式定義
| 初期値 | auto |
|---|---|
| 適用対象 | text and block containers |
| 継承 | あり |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |
形式文法
text-wrap-style =
auto |
balance |
stable |
pretty |
avoid-orphans
例
バランスの取れたテキスト
この例には 2 つの段落があり、最初の段落は既定の auto で、 2 つ目は balance です。
HTML
<h2>バランスなし</h2> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, ad. Impedit adipisci rerum modi praesentium atque aperiam vitae nesciunt consectetur assumenda deleniti repudiandae perferendis sed odio doloremque, aliquid natus laboriosam? </p> <h2>バランスあり</h2> <p class="balanced"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, ad. Impedit adipisci rerum modi praesentium atque aperiam vitae nesciunt consectetur assumenda deleniti repudiandae perferendis sed odio doloremque, aliquid natus laboriosam? </p> CSS
p { max-width: 60ch; } .balanced { text-wrap-style: balance; } 結果
仕様書
| Specification |
|---|
| CSS Text Module Level 4 # text-wrap-style |