keep-all 断词换行规则的两个使用案例分享(含实践)
![](https://assets.matters.news/embed/8f46b71a-743b-486d-8537-2c7b3e77bf7e.png)
本文 2021 年 11 月 7 日首发于 Medium · 查看原文
前段时间我对网页的断词换行规则做了一次深入的学习,当时我对一个不常见的规则word-break: kepp-all;
感到疑惑,想象不到什么情况下该使用它。
这几个月以来我一直带着这个问题来工作,刚好发现了这个规则的两个适用场景,于是写下这篇文章来做记录。
一、keep-all 的换行规则
设置 keep-all 后,可以让 CJK 字符像西文一样,也拥有“单词”的概念,不强制断开两个标点中间的文本,只会在遇到标点符号时才换行。
而对于非 CJK 字符,则用浏览器默认的换行规则。
![](https://assets.matters.news/embed/8b8375dd-30ba-47ba-95bd-31dcd5563de3.png)
二、在表格中使用(实践案例)
我在公司负责一个 B 端后台数据模块的设计,在最近一个需求里,需要在卡片内做一个数据展示表格(容器宽度不固定),而且要支持中英文环境。界面是长这样的:
![](https://assets.matters.news/embed/01c69b89-f01f-49f7-8ace-46dab45aae0f.png)
在该业务场景中,表格左对齐列展示的是维度,以名词居多,所以 “左对齐列的宽度” = “容器宽度 - 右对齐列的宽度 - 列间隔”。是非常宽松、弹性的换行规则。
而右对齐列展示的是指标,如数量、金额、百分比等。所以右对齐列的单元格是严禁换行的。所以 “右对齐列的宽度” 必须大于或等于 “单元格内容的最大宽度”。
![](https://assets.matters.news/embed/883cf058-cc65-49b0-9ad6-e408900715c9.png)
按照上述的列宽规则,右侧列的单元格,我们设置为 nowrap
,确保数字内容永不换行。但也带来了一个问题,如果单元格内容长度不够,表头会换行(如下图所示)。这个是实际会出现的现象,尤其是中文的表头换行,看上去很怪异,也不是我们预期内的结果。
![](https://assets.matters.news/embed/03de682e-82d8-47bd-a9e3-623efc55c48c.png)
为了修复上图的现象,直观的做法是将右侧列的表头设置为 nowrap
,让右侧列的表头保持和单元格一样,禁止换行。但这时会出现另一个问题:
![](https://assets.matters.news/embed/50ec7ba4-6886-4e86-92e7-043cd97c402e.png)
如上图所示,当英文单词过长,表头宽度大于容器宽度时,表头又不允许换行,会出现布局崩坏的情况,甚至表格会穿出卡片外面,效果不佳。
中文的表头换行会影响信息获取的体验,而英文单词换行则相对来说是比较平常的事情。
有没有办法做到在右侧表头里,中文不换行,英文根据单词来换行呢?
这时我们可以用上 word-break: keep-all;
了。因为当前的业务场景,中文表头里不存在标点符号,所以在 keep-all 的规则下中文不会换行。而英文单词之间的空格会触发换行,避免因指标的英文名称过长而占用太多宽度。
![](https://assets.matters.news/embed/14b5b0de-8495-4293-8e98-5ece09b176e6.png)
所以总结起来,在当前业务场景下,且有「容器宽度不固定」、「需要支持中英文语言」这两个前置条件,我整理了表格里面表头和单元格的换行规则如下表:
![](https://assets.matters.news/embed/fb147627-d0e8-4339-af91-9a981f2d7cdf.png)
按照该表的做法,可以确保实现出来后,效果会最大限度地符合预期。
插播一个偶然发现的无用小知识:换行后,文本容器的宽度会增加 0.5em 左右。即当字号是 14px 时,两个没换行的字,文本容器是 2 * 14px = 28px,而这两个字如果中间是有换行的话,则容器宽度是 14px + 0.5em = 21px(不同浏览器可能有小数级别的误差)
三、在展示型网站中使用
基于 keep-all 的特点,我也发现到似乎在中文的展示型网站(如工具型产品的官网,功能介绍页等)上,会有奇效。
举一个例子,今年上半年时, Github Issues 有一次大更新,同时也有一个功能的介绍页。原本是全英文的内容,我在翻译成中文后,看到在中文时,最后一句话是单独成行;而在英文时,最后一句话是紧贴着上一句话的。F12 一看,果然是用了 keep-all 的规则。
![](https://assets.matters.news/embed/516cfff0-6f97-427d-acb4-e9aaeafa3c5c.png)
为了多角度考证这种换行规则的展示效果,我找了几个其他展示型的网站,通过 F12 来将正文的换行规则改成 keep-all,对比图如下:
![](https://assets.matters.news/embed/ca1f000d-a416-45aa-8fac-1dfb7fc70923.png)
效果似乎还行,可以确保每一句话都在同一行。知道了有这种做法后,如果之后有对应的需求,也可以多一种选择了。
但是这种做法对文案有要求,即需要确保每句话的宽度(或两个标点/符号之间内容的距离),不能大于容器宽度。否则这段文本将会超出容器仍不换行,得不偿失了(如下图)。
![](https://assets.matters.news/embed/fb498f51-ac40-44cc-b6ed-98358b58994d.png)
所以这也是我写适用在「展示型网站」的原因,通常这类网站留白较多,而且文案是内部决定,具有调整的空间。
而由用户产生内容的场景,如论坛、社区、新闻等产品,则不建议使用这种规则,风险相当高。
参考网站:
喜欢我的作品吗?别忘了给予支持与赞赏,让我知道在创作的路上有你陪伴,一起延续这份热忱!
![](https://imagedelivery.net/kDRCweMmqLnTPNlbum-pYA/prod/avatar/834a59f5-f182-4229-900c-51b66151abf6.jpeg/public)
- 来自作者
- 相关推荐