关于 word-break 与 word-wrap 须要了解的知识

CSS 中有一对容易让人混淆的规则，word-break 与 word-wrap。咱们经常用它们进行换行的控制，不过我基本是处于用完就忘的状态，此次趁着机会总结一下关于它们的知识。

word-break

在介绍它以前，咱们先理解一个名词，soft wrap opportunity。soft wrap opportunity 指的是可以换行的断点位置，例如在大多数的书写系统里，空格和标点符号就是 soft wrap opportunity，排版时会在这些位置进行换行。

CSS 中的 word-break 就是用来定义 soft wrap opportunities。它支持如下几个值：

值	说明
normal	默认换行规则，只有在 soft wrap opportunity 可以换行
break-all	为了防止溢出，单词能够在任意为止被拆分来知足换行（中文、日文、韩文除外）。
keep-all	CJK（中文、日文、韩文）中的「单词」不会被拆分，非 CJK 会使用 normal 的规则。
break-word	与设置了 word-break: normal 和 overflow-wrap: anywhere 具备一样的表现。

break-all 与 keep-all 的区别在于 CJK 中的「单词」是否会被拆分，可我寻思着长这么大也没见过中文里有单词这东西呀。事实上，这个单词其实就是标点符号或空格前的部分。具体表现以下：

word-break: normal 可被拆分，因此「号，」被换到了下一行。

word-break: keep-all 不可被拆分，因此「我后面有符号，」这个单词都没被换行。能够理解为一个很长的英文单词在 normal 的值下也不会被分割换行。

word-wrap（overflow-wrap)

word-wrap 用来解决不可分割文字溢出的状况，被重命名为 overflow-wrap(单看 word-wrap，实在是难以想到它是用来解决溢出)。overflow-wrap 的兼容性并不如 word-wrap，不过差异不大，具体参见 caniuse。它支持如下几个值：

值	说明
normal	在正常的换行点换行，例如两个单词中的空格。
anywhere	为防止溢出，表示若是行内没有多余的地方容纳该单词，则那些正常的不能被分割的单词会被强制分割换行（如长字或URL）。可是在计算最小内容内在尺寸（min-content intrinsic sizes）时会考虑 anywhere 所产生的 soft wrap opportunities。
break-word	同 anywhere，可是在计算最小内容内在尺寸（min-content intrinsic sizes）时不会考虑 break-word 所产生的 soft wrap opportunities。

normal 还能理解，anywhere 与 break-word 的那一大串说明究竟是在说啥？看不明白就测试一下表现，然而 anywhere 在 chrome 中居然是一个非法值，因而只能去找备胎 firefox。

anywhere 与 break-word

啥是最小内容内在尺寸（ min-content intrinsic sizes）？从 W3C 又是一串说明，简单来讲，min-content intrinsic sizes 就是不会致使文本溢出而且尽可能换行的最小宽度。那么计算最小内容内在尺寸和 soft wrap opportunities 又有什么关系呢。计算最小内容内在尺寸要求尽可能换行，而 soft wrap opportunities 又决定着哪些地方能换行。

当咱们给文本容器设置 width: min-content 时，咱们才能看出 anywhere 与 break-word 的区别。

overflow-wrap: anywhere 会影响计算最小内容内在尺寸的计算，因此容器的宽度会足够小。

overflow-wrap: break-word 不会对容器宽度产生影响。

总结

通过上文的介绍，word-break 与 word-wrap 除了都有 word 好像就没啥容易淆的了。

从用途上来讲：

• word-break 是用来定义 soft wrap opportunities，即哪些地方是可以换行的。
• word-wrap 是用来解决不可分割文本溢出容器的状况的。

那么文本是否可分割是由什么控制的呢？显然就是 word-break，因此 word-break 的优先级是高于 word-wrap 的。当设置了 word-break: break-all 后，就不存在不可分割文本了，那么 word-wrap 属性天然就无效了。

在咱们平常使用中，注意如下几个点能够很容易排除混淆：

首先，使用 overflow-wrap 替代 word-wrap，由于 word-wrap 与 word-break 这两看久了真的容易眼花。

其次，不使用 word-break: break-word，一是它已经不被推荐使用了，就是个历史遗留的坑爹属性；二是太容易和 word-wrap: break-word 混淆了，虽然大多数状况下它们的表现是同样的。

最后，少使用 anywhere，一是目前在 chrome 的表现奇怪；二是 min-content 在平时使用的并很少，它会出现与 break-word 的不一样的表现的场景并很少。

因此，咱们能用的值就只剩下：

word-break
normal	只有 soft wrap opportunity 可以换行
break-all	任意位置都可以换行（CJK 除外）
keep-all	CJK 只会在换行符处换行

overflow-wrap
normal	正常换行
break-word	分割单词以知足换行

在常见的分割过单词的场景，咱们须要设置 overflow-wrap: break-word。最后，为何我要花这么多时间来理清这两规则的关系？

参考

• inline-breaking
• word-break
• overflow-wrap