文字处理之换行及word break和word wrap属性详解

上一篇博客中介绍white-space属性时聊到了换行，这一篇介绍换行的细节。

浏览器的默认行为

浏览器的换行行为，对于中文和英文存在一些差异。

中文换行

正如上一篇博客中所说的，中文换行比较简单，这一行放不下就换行。除了中文以外，韩文和日文的处理也是同样的。这三种文字合在一块儿就是MDN介绍word-break属性时所说的CJK（Chinese, Japanese, Korean的缩写）。

英文换行

来到英文，状况就要复杂一些。在英文中有单词的概念，因此在换行时就得考虑单词的完整性。

1. 浏览器按照空格来识别单词，默认状况下，浏览器不会在单词内换行

   <p> thisisalonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglongword</p>
   复制代码

   咱们在p标签内部放了一些英文字母，这些字母之间并无用空格来分隔开来，这就像文言文没有用标点符号断句同样。因此，就如同你看不懂没有断句的文言文，浏览器也看不懂没有用空格分隔的英文。因而浏览器在处理时，就会把这一长串英文只是当成一个很长很长的单词，只有一个单词也就不会换行，由于默认的换行只会在单词之间。

2. 当一行放不下时，浏览器会尝试把最后一个单词放到下一行，若是下面这一整个空行仍是放不下这个单词，那么就会任由这个单词超出容器，反正默认状况下浏览器是不会把单词拆开的。

   <p> this is a longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglongword</p>
   复制代码

   最后显示时，就会把后面这个长单词放到下一行，而后任由其超出容器：

word-break属性

从上面的两点看到，浏览器已经在很努力的换行，从而尽可能让文字不要超出容器了。但即便是这样，对于较小的容器中存放的长单词，当整个一行还放不下一个单词是，浏览器也是无能为力，毕竟浏览器要保证单词的完整性，不敢随随便便把一个单词给拆了。可是，word-break属性就赋予了浏览器拆单词的权力。

1. word-break:normal：这是默认值，也就是浏览器的默认行为

2. word-break:break-all：能把all都break掉，全部的东西都能拆，因此，单词随便拆

   <p style="word-break:break-all">this is a longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglongword</p>
   复制代码

   这样浏览器在排版时，就彻底能够把字母当成拆分单位，一个字母一个字母的往上放，放不下时就把字母放到下一行。能够理解成，此时就没有单词的概念了，只有字母。

3. word-break:keep-all：上面在介绍浏览器的默认行为时，CJK字符和英文是分开，之因此这样，是由于word-break属性对于中英文的行为也是分开的。上面介绍的break-all值，主要也是针对英文的，汉字仍是按照浏览器的默认行为，装不下就换行。对于中文来讲，没有拆分不拆分，只有换行不换行。keep-all就是让中文不要换行，此时英文仍是按照浏览器的默认行为来。

   <p style="word-break:keep-all">this is a longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglongword 这是中文这是中文是中文这是中文这是中文这是中文是中文这是中文这是中文这是中文是中文这是中文这是中文这是中文是中文这是中文这是中文这是中文是中文这是中文这是中文这是中文是中文这是中文这是中文这是中文是中文这是中文</p>
   复制代码

   注意这里我在中英文之间加了个空格，不然浏览器会把后面的中文页当成是英文单词的一部分。最后显示时，英文仍是按照默认行为，中文变成了不换行。

4. word-break:break-word：在MDN上，只会介绍前面三个属性，由于只有前三个才是标准的，而break-word是非标准的。若是必定要使用这个值，就须要注意下浏览器的兼容性，其最后显示的效果，跟下面介绍的word-wrap:break-word基本一致，这里再也不多说，看下面吧。

word-wrap属性

word-break:break-all在拆英文单词时，细看一下，当longlonglon...longword这个单词在第一行末尾放不下时，实际上是分了两步：

1. 以字母为单位处理，尽可能将这个长单词的字母往第一行放，能放多少放多少
2. 后面连单个字母都放不下时，再换行，放其余字母。

而word-wrap:break-word则不一样，他会首先直接换行，放单词，第二行放不下，再拆单词

<p style="word-break:break-word">this is a longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglongword</p>
复制代码

与上面的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还能够控制中文。其实想一想，仍是中文的事少，没有拆分的顾虑，只用考虑换行不换行就能够了。