文本换行规则

文本换行规则中涉及的属性有word-wrap 、word-break 、white-space。
mozilla开发者网站上对上述属性都有着比较详细的描述，这里准备对上述属性对换行规则的影响进行进一步的总结。

在文字换行规则中，不同语言中的字符处理规则存在差异。
在默认情况下，即word-wrap: normal, word-break: normal, white-space: normal时，CJK（中文、日文、韩文）文本可以在任意2个字符间断行，而非CJK文本（如英文等）只能在空白符处断行。

图1 非CJK文本只能在空白符处断行 图2 CJK文本可以在任何位置断行

word-break

如果我们想要CJK文本表现的和非CJK文本一样或者想要非CJK文本表现和CJK文本一样要怎么办呢？word-break属性就是来处理这种情况。默认情况下word-break: normal，CJK文本和非CJK应用自己的默认换行规则。设置为word-break: break-all后，非CJK文本会应用CJK文本的换行规则，可以在任意位置断行。而设置word-break: keep-all后，CJK文本会应用非CJK文本的换行规则，只能在空白处断行。

图3 word-break: break-all 时的非CJK文本 图4 word-break: keep-all 时的CJK文本

word-wrap

word-wrap属性用来处理这样的情景：一个不可分割的字符串过长，超过容器盒的宽时应该如何处理？在默认情况下(word-wrap: normal)，字符串超出了容器盒的宽，不会断行。当设为word-wrap: break-word时，过长的字符串会发生断行。

图5 应用word-wrap: break-word后图4的效果，过长文本断行 图6 应用word-wrap: break-word后图1的效果，过长文本断行

white-space

white-space属性是用来设置针对空白符的处理规则。其中white-space: nowrap会使文本中换行无效。这一规则优先于上面提到的规则。所以在white-space: nowrap时，无论是设置了word-break: break-all还是设置了word-wrap: break-word，文本都不会换行。

图7 图5和图6应用white-space: nowrap后的效果