by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11717
本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。

一、前文回顾，balance属性值

两年前有介绍过text-wrap:balance的作用，详见“5分钟快速了解text-wrap:balance的作用”此文。

这个声明还是挺好用的，特别适合用在可换行的水平列表排列上。

比方说过去，点赞头像这种布局，就可能第一行很多，第二行很少：

使用text-wrap:balance之后，可以让两行的数量接近，布局效果很好很多。

现在text-wrap又支持了两个新的属性值，pretty和stable。

二、值pretty和stable的作用

1. text-wrap:pretty

按照MDN上的说法，text-wrap:pretty声明和text-wrap:wrap是一样的，区别在于text-wrap:pretty更注重排版，而非性能，也就是wrap的算法速度更快。

所以我就很好奇，既然pretty和wrap效果一样，性能还更差，那为何还要设计出来呢？

后来查了个资料，终于明白pretty和wrap的差异了，text-wrap:pretty可以避免最后一行过短。

MDN页面的demo我通过添加文字，让最后一行只露出一个单词，终于看到了两者的区别，如下GIF所示：

按照规范上的说法，不同浏览器对pretty的理解是可以不一样的，可就是Firefox，Safari之类可能是另外的排版美化效果，上图展示的事Chrome下的表现。

目前，Chrome117+版本支持该值，Safari即将支持，Firefox还未支持。

2. text-wrap:stable

stable的作用，按照文档的说法，也是和wrap没有什么区别。只有当文本内容处于标记状态的时候，text-wrap:stable可以让编辑内容前面的行内容保持稳定，而不会整个文本内容发生排版变化。

嗯……我反复尝试了下，未能复现。反正意思就是，如果元素是contenteditable可编辑的，那么建议设置text-wrap:stable，只有好处，没有坏处。

目前Chrome 130+版本支持属性值stable，奇怪的是，此属性值Safari和Firefox也都已经支持了，这个现象倒是有趣。

三、子属性text-wrap-mode

由于text-wrap属性的值愈发复杂，因此，开始有了子属性，text-wrap就变成了合并属性，类似于text-decoration、border-image这类CSS属性。

两个子属性，一个是text-wrap-mode，还有一个是text-wrap-style。

text-wrap-mode这个属性超级简单，单看语法就知道怎么使用的了：

/* 换行显示 */
text-wrap-mode: wrap;
/* 不自动换行显示 */
text-wrap-mode: nowrap;

不过考虑到兼容性，我们目前还是使用white-space属性比较合适：

/* 换行显示 */
white-space: wrap;
/* 不自动换行显示 */
white-space: nowrap;

四、子属性text-wrap-style

直接看text-wrap-style属性的语法：

/* 正常换行显示 */
text-wrap-style: auto;
/* 每行内容尽可能相等 */
text-wrap-style: balance;
/* 最后一行不要太短 */
text-wrap-style: pretty;
/* 保持前面行数排版稳定 */
text-wrap-style: stable;

text-wrap-mode和text-wrap-style这两个属性的兼容性是一样的，都是今年刚支持的新特性。

五、结语

还是balance属性值实用，最近新支持的几个CSS属性和方法，你不能说他毫无用处，只能说只有一丢丢用处，给我感觉，就是规范制定那群人，不整点新东西，就好像工作不饱和，自己失去了存在价值一般。

有点类似于公司里面想一些无效的需求，来解决那么多人的就业问题一样。

注定扫入历史垃圾箱的几个新特性。

好吧，就说这么多，感谢阅读，我的侍妾慕沛灵希望大家多多转发。

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：https://www.zhangxinxu.com/wordpress/?p=11717

（本篇完）