css`text-wrap:pretty`

昔人'2025-10-17 12:57

text-wrap 是一个 CSS 新属性, 用于控制文本换行的策略。

其中，text-wrap: pretty 是一个较新的值，用来让浏览器在换行时更"美观"，特别是在段落末尾或标题中避免出现"孤词"。

值	含义
`wrap`（默认）	正常换行，必要时会折行。
`nowrap`	禁止换行。
`balance`	尝试让多行文本长度接近（常用于标题）。
`pretty`	在保证可读性的前提下，美化换行效果（避免最后一行只有一个词）。

text-wrap: pretty 让浏览器在计算换行点时：

尽量避免让一行的最后只剩一个短词（"孤行"）。
允许浏览器稍微调整前几行的分布，使段落或标题更自然。
不会改变原有文字内容或间距，只是更智能地选取换行位置。

css 复制代码

<style>
.demo p {
  width: 200px;
  border: 1px solid #ccc;
  margin-bottom: 1em;
  font-size: 18px;
  line-height: 1.4;
}
.pretty {
  text-wrap: pretty;
}
</style>

<div class="demo">
  <p>普通换行 (默认 wrap)：</p>
  <p>Wrap balance is a new CSS feature that makes text wrapping look better.</p>

  <p>使用 pretty：</p>
  <p class="pretty">Wrap balance is a new CSS feature that makes text wrapping look better.</p>
</div>

在第二个段落中，浏览器会尽量避免最后一行只剩一个"better."，会提前换行让文本布局更自然。

截至 2025年：

✅ Chrome 117+

✅ Edge 117+

✅ Safari 17+

⚠️ Firefox 尚未完全支持（可能需要实验性标志）
See the Pen css`text-wrap: pretty` by liu874396180 ( @liu874396180) on CodePen.