text-wrap-style

**text-wrap-style** CSS 属性控制元素内部文本的换行方式。不同的值提供了块元素内容换行的备选方式。它也可以使用 text-wrap 简写来设置和重置。

尝试一下

语法

css
/* 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

文本换行的方式是，当用户编辑内容时，他们在编辑之前出现的行保持静态，而不是整个文本块重新换行。

描述

当允许内容换行时，默认情况下是允许的，那么有很多选择可以影响内容的换行方式。

为text-wrap-style 选择的值取决于您预期要设置样式的文本行数、文本是否是contenteditable 以及您是优先考虑外观还是性能。

当设置样式的内容将限于少量行时，例如标题、标题和引用，可以添加text-wrap-style: balance 来平衡每行中的字符数量，从而提高布局质量和可读性。由于浏览器限制了受此属性影响的行数，因此此值对性能的影响可以忽略不计。

对于更长的文本段落，可以使用text-wrap-style: pretty 。请注意，pretty 对性能有负面影响，因此应仅在布局比速度更重要时将其用于更长的文本块。

stable 值在用于contenteditable 的内容时改善了用户体验。此值确保当用户编辑文本时，正在编辑的区域中的前几行保持稳定。

正式定义

初始值auto
应用于文本和块容器
继承是
计算值如指定
动画类型离散

正式语法

text-wrap-style = 
  auto     |
  balance  |
  stable   |
  pretty

示例

平衡文本

此示例包含两个段落，第一个是默认的auto ，第二个是balance 。

HTML

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

css
p {
  max-width: 60ch;
}
.balanced {
  text-wrap-style: balance;
}

结果

规范

规范
CSS 文本模块级别 4
# text-wrap-style

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参见