CSS word-break:是谁动了我的 break-all

今天,我的一个同学想要简单的实现一个文本根据 container 自动换行的效果,嗯,可以说是非常 basic 了,然而……依旧遇到了一点坑:

如下:

JS Bin on jsbin.com

为什么明明是 break-all 了,我的标点符号还是不能被自动断行。

MDN 说了和没说一样,只覆盖了字符集,而没有覆盖到标点符号和单字的问题。

然后我们查阅了 stackoverflow,大概意思是这样的,这是一个 Feature,而并非一个 Bug。

在 W3C 的草案中有一个 issue 中的一个表格很清晰的指明了道路:

ValueWhenBreak AtPreferred Width
word-break: break-allAnytimeExcept certain punctutationSame as line break

更多懒得打了,请查阅:https://github.com/w3c/csswg-drafts/issues/1171#issuecomment-293149991

只要单纯的 word-wrap,反而能够实现这个效果:

JS Bin on jsbin.com

当然,实际上,效果是有差异的,因为它不能严格的按照字母换行,还是按照 word 来区分。

之后我们还讨论了一下关于 word-break 的适用场景,实际上,是否需要 word-break 还是需要根据场景来决定,根据我的脑补,做出了以下总结:

  • 当 Container 大小不定而文本内容固定的时候,可以考虑用 word-break: break-all,因为这种时候文本内容是可控的,通常来说不会出现过多符号在一起的情况下。
  • 当文本内容不在开发者的可控范围内的情况,请勿使用 break-all,鬼知道你的用户到底想要以什么姿势使用。

如果您觉得文章不错,可以通过赞助支持我

标签: 知识, 代码段, 语法

添加新评论