CSS有一对令人困惑的规则，断字和换行。我们经常用它们来控制换行，但是用完我基本处于忘机状态。这次我将借此机会总结一下我对它们的了解。在介绍分词之前，我们先了解一个名词，softwrapopportunity。softwrapopportunity指的是可以断线的断点位置。例如，在大多数书写系统中，空格和标点符号是软换行的机会，排版时会在这些位置进行换行。CSS中的分词符用于定义软换行机会。支持以下值：值描述normal默认换行规则，只在软换行机会break-all为防止溢出，单词可以在任意一端拆分以满足换行（中文、日文、韩文除外）。keep-allCJK（中日韩）中的“词”不会拆分，非CJK使用正常规则。break-word的行为与设置word-break:normal和overflow-wrap:anywhere相同。break-all和keep-all的区别在于CJK中的“词”会不会被拆分，但我在想，我从小到大都没见过中文的词。事实上，单词实际上是标点符号或空格之前的部分。具体表现如下：word-break：正常可以拆分，所以“number”被改到下一行。word-break：keep-all不能被拆分，所以“我后面有一个符号”这个词没有被打破。可以这样理解，一个很长的英文单词在normal值下是不会被split和newline的。word-wrap(overflow-wrap)word-wrap是用来解决不可分割的文本溢出的，改名为overflow-wrap（单看word-wrap，真的很难想到它是用来解决溢出的）。overflow-wrap的兼容性不如word-wrap，但是区别不大，详见caniuse。它支持以下值：valuedescriptionnormal在正常的换行点换行，例如两个单词之间的空格。anywhere防止溢出，意思是如果行中没有多余的空间容纳单词，那些不能正常拆分的单词会被强行拆分成换行符（比如长单词或者URL）。但是，在计算最小内容固有大小（min-contentintrinsicsizes）时，会考虑任何地方创建的软包装机会。break-word和anywhere一样，但是在计算最小内容固有尺寸（min-contentintrinsicsizes）时不考虑break-word产生的软包装机会。normal也能看懂，aboutanywhere和break-word讲的stringsofinstructions是什么意思？看不懂就测试性能，但是anywhere在chrome里面是非法值，只能找备胎firefox了。Anywhere和break-word什么是最小内容固有大小（min-contentintrinsicsizes）？另一个来自W3C的指令串，简单来说，min-contentintrinsicsizes就是尽可能不会导致文本溢出和换行的最小宽度。那么计算最小内容固有大小与软包装机会有什么关系呢？计算最小内容固有大小需要尽可能多地换行，而软换行机会决定了换行的位置。当我们给文本容器设置width:min-content时，我们可以看出anywhere和break-word的区别。overflow-wrap：任何地方都会影响最小内容固有尺寸的计算，所以容器的宽度会足够小。overflow-wrap:break-word对容器宽度没有影响。总结经过上面的介绍，word-break和word-wrap似乎没有什么好混淆的，只是它们都有word。在用法上：word-break是用来定义softwrapopportunity，即哪些地方可以换行。word-wrap用于解决不可分割的文本溢出容器的情况。那么是什么控制文本是否可拆分呢？显然是断字，所以断字的优先级高于换行。当设置了word-break:break-all时，就没有不可分割的文字了，word-wrap属性自然就失效了。在我们日常使用中，注意以下几点可以轻松消除混淆：第一，使用overflow-wrap而不是word-wrap，因为word-wrap和word-break时间长了真的很容易晕。其次，不要使用word-break：break-word，一是不再推荐，是历史遗留下来的作弊属性；其次，它很容易与word-wrap:break-word混淆，尽管在大多数情况下它们的行为是相同的。最后，少用任何地方。首先，当前在chrome中的表现很奇怪；其次，min-content平时用的不多，出现和break-word不同的场景也不多。因此，我们唯一可以使用的值是：word-breaknormal只有软换行机会换行break-all可以在任意位置换行（CJK除外）keep-allCJK只会在换行符处换行overflow-wrapnormal一般换行break-word分词满足换行常见的分词场景，我们需要设置overflow-wrap:break-word。最后，为什么我要花这么多时间弄清楚这两个规则之间的关系？参考inline-breakingword-breakoverflow-wrap
