text-wrap-style
Baseline 2024 *
新推出
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;
}
語法
/* Keyword values */
text-wrap-style: auto;
text-wrap-style: balance;
text-wrap-style: pretty;
text-wrap-style: stable;
/* Global values */
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 為六行或更少，Firefox 為十行或更少）的文字塊。
pretty-
文字使用較慢的演算法換行，該演算法更傾向於更好的佈局而不是速度。這適用於正文，其中良好的排版比效能更受青睞（例如，當應將孤行的數量保持在最低限度時）。
stable-
文字換行方式是：當用戶編輯內容時，他們正在編輯的行之前的行保持靜態，而不是整個文字塊重新換行。
注意： CSS 文字模組為 text-wrap-style 屬性定義了一個 avoid-orphans 值，以避免過短的最後一行，並期望使用者代理在做出換行決策時考慮多於一行。此值尚不受任何瀏覽器支援。
描述
當允許內容換行時（預設情況下允許），有許多選擇可以影響內容換行的方式。
您為 text-wrap-style 選擇的值取決於您期望設定樣式的文字行數、文字是否可編輯 (contenteditable)，以及您是否需要優先考慮外觀或效能。
當樣式化內容將限制在少量行時，例如標題、說明文字和引用塊，可以新增 text-wrap-style: balance 來平衡每行的字元數，從而提高佈局質量和可讀性。由於瀏覽器限制了受此屬性影響的行數，因此此值對效能的影響可以忽略不計。
對於較長的文字段落，可以使用 text-wrap-style: pretty。請注意，pretty 對效能有負面影響，因此只應在佈局比速度更重要時用於較長的文字塊。
當用於 contenteditable 內容時，stable 值可改善使用者體驗。此值可確保當用戶編輯文字時，編輯區域中的前幾行保持穩定。
正式定義
正式語法
text-wrap-style =
auto |
balance |
stable |
pretty |
avoid-orphans
示例
平衡文字
此示例包含兩個段落，第一個是預設的 auto，第二個是 balance。
HTML
<h2>Unbalanced</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>Balanced</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;
}
結果
規範
| 規範 |
|---|
| CSS 文字模組第 4 級 # text-wrap-style |
瀏覽器相容性
載入中…