上一篇博客在介绍white-space属性的时候，讲到了换行。本文介绍了换行的细节。浏览器的默认行为是浏览器的换行行为，中英文有些差异。Chinesenewline在之前的博客中有提到，Chinesenewline比较简单，如果装不下这一行，就把它包起来。除了中文，韩文和日文的处理也是一样的。这三个字符的组合就是MDN在介绍分词属性时提到的CJK（中文、日文、韩文的缩写）。当英文换行符来到英文的时候，情况就比较复杂了。英语中有单词的概念，所以换行时要考虑单词的完整性。浏览器根据空格识别单词。默认情况下，浏览器不会在单词中换行。总的来说，这就像没有标点符号的文言文。因此，就像没有断句就无法理解文言文一样，浏览器也无法理解没有空格的英文。所以浏览器在处理的时候会将这一长串英文当成一个很长的单词，如果只有一个单词就不会换行，因为默认的换行只会在单词之间。当一行不适合时，浏览器会尝试将最后一个字放在下一行。如果下面的整个空行仍然放不下这个词，就会让这个词超出容器。无论如何，默认情况下，浏览器不会将单词分开。
thisisalonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglongword
最后显示时，就会把后面这个长单词放到下一行，然后任由其超出容器：word-break属性从上面的两点看到，浏览器已经在努力断线，让文字尽可能不超出容器。但即便如此，对于存储在较小容器中的长词，当整行放不下一个词时，浏览器也束手无策。拆除。但是，word-break属性赋予浏览器断词的能力。word-break:normal：这个是默认值，是浏览器默认行为break:break-all">thisisalonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglongword这样浏览器在排版时，就完全可以把字母当成拆分单位，一个字母一个字母的往上放，放不下时就把字母放tothe下一行。可以这样理解，此时没有词的概念，只有字母。![word-break:break-all]][3]word-break:keep-all：上面介绍浏览器默认行为的时候，CJK字符和英文是分开的。之所以这样，是因为分词属性是针对中英文行为的，也是分开的。上面说的break-all值主要是针对英文的。汉字还是遵循浏览器的默认行为，放不下就换行。对于中文，没有拆分，没有拆分，只有换行，没有换行。keep-all就是让中国人不要断线。这时，英文还是按照浏览器的默认行为。
这是一个lonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlon..这是中文的..是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文这是中文注意这里我在中英文之间加了一个空格，否则浏览器会把后面的中文页面当成英文单词的一部分。最后显示的时候，英文还是按照默认的行为，中文变成了没有换行。word-break:break-word：在MDN上只引入了前三个属性，因为只有前三个是标准的，break-word是非标准的。如果一定要使用这个值，需要注意浏览器的兼容性。最终的显示效果和下面介绍的word-wrap:break-word基本一样。这里我就不多说了。让我们看看下面。word-wrap属性word-break:break-all拆分英文单词时，仔细看看。当longlonglon...longword这个词放在第一行末尾放不下的时候，其实分两步：以字母为单位处理，尽量把这个长词的字母放到第一行，你多少可以放，当后面一个字母都放不下的时候，换行放其他字母。而word-wrap:break-word则不同，他会首先直接接换行，放单词，第二行放不下，再拆单词这是一个longlonglonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonlonglonglonglonglonlonlonlonlonlonlonlonlonlonglongword对比上面的word-break:break-all图，可以理解拆分一个词也是拆分一句话，但我会在拆分之前切换到下一行。另一个属性值是word-wrap:normal，这是默认值，对应浏览器的默认行为。word-break和word-wrap很容易混淆，所以在CSS3中，word-wrap被改成了overflow-wrap，但是考虑到兼容性，word-wrap还是用的比较多。综上所述，word-break:break-all和word-wrap:break-word这两个属性都被认为是拆分长英文单词，只是拆分的方式有点不同。另外word-break:keep-all也可以控制中文。其实仔细想想，中文的东西还是很少的，不用担心拆分。你只需要考虑换行与否。
