CSS word-break：是谁动了我的 break-all
今天，我的一个同学想要简单的实现一个文本根据 container 自动换行的效果，嗯，可以说是非常 basic 了，然而……依旧遇到了一点坑：
如下：
为什么明明是 break-all 了，我的标点符号还是不能被自动断行。
MDN 说了和没说一样，只覆盖了字符集，而没有覆盖到标点符号和单字的问题。
然后我们查阅了 stackoverflow，大概意思是这样的，这是一个 Feature，而并非一个 Bug。
在 W3C 的草案中有一个 issue 中的一个表格很清晰的指明了道路：
| Value | When | Break At | Preferred Width |
|---|---|---|---|
| word-break: break-all | Anytime | Except certain punctutation | Same as line break |
更多懒得打了，请查阅：https://github.com/w3c/csswg-drafts/issues/1171#issuecomment-293149991
只要单纯的 word-wrap，反而能够实现这个效果：
当然，实际上，效果是有差异的，因为它不能严格的按照字母换行，还是按照 word 来区分。
之后我们还讨论了一下关于 word-break 的适用场景，实际上，是否需要 word-break 还是需要根据场景来决定，根据我的脑补，做出了以下总结：
- 当 Container 大小不定而文本内容固定的时候，可以考虑用
word-break: break-all，因为这种时候文本内容是可控的，通常来说不会出现过多符号在一起的情况下。 - 当文本内容不在开发者的可控范围内的情况，请勿使用
break-all，鬼知道你的用户到底想要以什么姿势使用。
植入部分
如果您觉得文章不错，可以通过赞助支持我。
如果您不希望打赏，也可以通过关闭广告屏蔽插件的形式帮助网站运作。