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 |
浏览器兼容性
加载中…