CSS text-wrap pretty 如何改善长段落末行：与 balance 的选择和回退检查

产品说明页上线后，设计稿里看着整齐的正文在真实宽度下常常会露出一个小问题：最后一行只剩两三个字，段落像被硬切了一刀。CSS 默认的 text-wrap-style: auto 更在意快速找到可用断点；如果内容是较长的正文，可以试试 pretty，让排版质量优先，但它不是所有文本都该开的“美化开关”。

先复现那一行突兀的短尾巴

先准备一个固定宽度的正文卡片，不要一上来就改字体。下面的 CSS 把内容宽度限制在 42ch，这样换行结果更容易在不同窗口里复查。

.article-copy {
  max-width: 42ch;
  text-wrap-style: auto;
}

在浏览器里把窗口从 1280px 拖到 768px，再观察最后一行。如果只是容器太窄或字体太大，pretty 也无法凭空增加可用宽度；它解决的是断点选择，不是布局尺寸。

auto 和 pretty 到底差在哪里

text-wrap-style: auto 采用浏览器默认的高效算法，适合大多数内容。改成 pretty 后，浏览器会尝试减少孤行，让较长段落的视觉边缘更平整，但这意味着排版计算可能更慢。它不会改变语言的断行规则，也不会保证每一行长度相同。

把改动限制在正文容器

.article-copy {
  max-width: 42ch;
  text-wrap: pretty;
}

@supports not (text-wrap-style: pretty) {
  .article-copy {
    text-wrap: wrap;
  }
}

这里使用 text-wrap: pretty 是简写写法，保留了默认的 wrap 模式。支持新属性的浏览器会尝试更好的正文断行，不支持的浏览器继续普通换行，页面不会因为一条未知声明失去内容。

标题用 balance，正文用 pretty

标题和正文的目标不同。标题通常只有两到六行，重点是让每行长度接近；正文可能持续很多行，重点是减少不自然的孤行。因此可以把两种策略分开：

.article-title {
  text-wrap-style: balance;
}

.article-copy {
  text-wrap-style: pretty;
}

这条分工就是本文的判断路径：h2 连接到 balance，正文段落 p 连接到 pretty。如果标题超过浏览器对 balance 的处理行数，效果可能退回普通换行；这时缩短标题或调整最大宽度通常比继续堆 CSS 值更可靠。

三个容易误判的边界

pretty 不是强制两端对齐

它只提示浏览器在可用断点中优先选择更好的组合，不会像 text-align: justify 那样拉伸单词间距，也不会在中文文本中人为插入标点断点。

不要给实时编辑区盲目套 pretty

长篇 contenteditable 编辑器每次输入都会重新排版，较慢算法可能放大输入延迟。需要保持光标前文本稳定时，可以考虑 text-wrap-style: stable，它的目标是编辑过程的稳定性，不是减少正文孤行。

宽度和字体仍然是第一检查项

如果问题来自 max-width 太小、字体回退或行高不合适，先修布局。打开开发者工具查看实际字体、容器宽度和 computed style，再比较 auto 与 pretty，结论才不会被环境差异带偏。

上线前这样做回归检查

1. 分别在桌面宽度和窄屏宽度检查同一段正文，确认没有横向溢出。
2. 给标题替换一条更长的中文文案，确认 balance 没有造成异常的大块空白。
3. 在支持与不支持 pretty 的浏览器中检查，后者应保持普通换行并完整显示文字。
4. 如果页面有编辑器，再输入连续长文本，观察光标附近是否出现明显卡顿。

相关问题

可以把所有段落都设为 pretty 吗？

不建议。它更适合排版质量优先的较长正文；高频更新、数量很大的列表文本应先评估重排成本。

balance 和 pretty 能同时写吗？

可以，但同一元素最终只会采用一个有效的换行风格。更清晰的做法是标题使用 balance，正文使用 pretty。

不支持 text-wrap-style 的浏览器怎么办？

保留默认的 wrap 或通过 @supports 提供普通换行即可。未知 CSS 值会被忽略，不影响文字显示。

把排版策略留给内容长度

这次排查的关键不是记住一个新属性，而是先分辨文本任务：短标题追求行长平衡，长正文才值得尝试更慢的孤行优化，可编辑内容则优先保证输入稳定。把 pretty 限定在明确的正文容器，再用窄屏、长标题和编辑输入做三轮检查，通常比全局覆盖更稳。