段落末尾孤零零一个字，设计师每次都要追着问——今天 CSS 一行把它修了

写页面的时候，段落写完了看起来挺整齐，到真机上一看——最后一行就孤零零一个字杵在那儿，设计师看了直摇头。

这事以前只能靠手调：找到那个段落，在最后两个字之间塞一个 nbsp，或者让编辑在 CMS 里手动处理。但凡页面改个宽度、换套字号，整个流程重来一遍。

这个问题，今天用一个 CSS 属性原生解决了。

text-wrap: pretty 是什么

text-wrap: pretty 是 CSS text-wrap 属性的一个值，专门优化段落换行。它的工作逻辑很简单：如果一个段落最后一剩一个单词，就把前面某一行放开一点，把那个单词拽上去。

/* 之前：最后一行可能只剩一个单词 */
p {
  text-wrap: wrap;
}

/* 之后：一行 CSS，浏览器自己处理孤字问题 */
p {
  text-wrap: pretty;
}

效果示意：

text-wrap: wrap（默认值）
Great typography is invisible. Readers flow through content without noticing where lines break or how words are distributed. But a single orphaned word stranded on the final line of a paragraph disrupts the rhythm.

text-wrap: pretty
Great typography is invisible. Readers flow through content without noticing where lines break or how words are distributed. But a single orphaned word stranded on the final line of a paragraph disrupts the rhythm.

看起来差不多？得把窗口拉窄、换行变多的时候差别才明显——wrap 模式下最后一行经常只剩一个词；pretty 模式下浏览器会把倒数第二行的内容放开一点，把那个词留在倒数第二行，而不是让它孤零零挂在最后。

浏览器支持：Safari 26 刚刚补上了最后一块

这是关键时间点：Chrome 117+ 和 Safari 17.5+ 已经支持，Safari 26（2026 年 3 月）进一步完善算法后，pretty 这个值才算真正稳了。Firefox 还没跟上来，不过会静默忽略，段落照常换行，不会有任何布局问题。

换句话说，你现在就可以用，不需要等 Firefox：

article p,
.prose p,
.blog-post-content {
  text-wrap: pretty;
}

加一行 CSS，段落末尾孤字的问题在 Chrome 和 Safari 上从此消失。

pretty 和 balance 不是一个东西

容易搞混的两个值：

• text-wrap: balance：把标题的每一行都调成差不多长，适合 h1、h2、引文。浏览器有行数上限，6 行以内效果最好。
• text-wrap: pretty：只优化段落末尾，专门处理孤字问题，适合正文 p。

不要在同一个元素上同时用两个值，它们针对的场景不同。

和 hyphens: auto 配合效果更好

pretty 会调用 Knuth-Plass 断行算法（和 TeX 同一套），如果有连字符，还能进一步优化断点：

article p {
  text-wrap: pretty;
  -webkit-hyphens: auto;
  hyphens: auto;
}

这个组合在英文文章里效果最明显，中文基本不生效（中文没有空格分词）。

什么时候不值得用

pretty 的算法比普通换行贵一些，对特别长的段落（几十段的那种）可能会有性能影响。如果是新闻列表那种截断的短段落，用不用其实看不出区别。

结论：正文段落、博客文章、产品描述页，用上这一行 CSS 就行。 设计师追着问段落结尾的问题，从此不需要手写 nbsp 了。