页面文字排版，深入了解white-space,word-break, word-wrap

先从white-space谈起，white-space顾名思议，控制“空白空间”。为了看清区别，我们设置一段源文本，包含三行文本（非br换行），每一行可能包含连续多个空格。如下图

源文本

再将white-space设置成不同的值，可以清楚地看到各个值之前的区别

normal——     合并多个空格：是；    源文本换行符换行：否；自动换行：是

pre-line——    合并多个空格：是；    源文本换行处换行：是；自动换行：是

pre-wrap——  合并多个空格：否；    源文本换行处换行：是；自动换行：是

pre——           合并多个空格：否；    源文本换行处换行：是；自动换行：否

no-wrap——   合并多个空格：是；    源文本换行处换行：否；自动换行：否

white-space

但是，如果某个单词很长，white-space是否会自动换行呢？我们试一下，在preWrap的文本中加一个无空格的长单词，很遗憾，长单词并没有自动换行。

因此，可以明确：white-space只对空白相关的显示进行处理，white-space的自动换行，也只会在空白中进行自动换行。

但是，对于长单词，怎么处理？

看下一个属性，word-break，同样顾名思义，word-break是处理单词换行的属性。把所有属性列出来看看区别

以下都先设置了white-space:pre-wrap

break-word——换单词换行，尽量不截断单词本身；对于当前行显示不全的单词，先换到一个新行，如果还是显示不全，则按字符换行。

break-all——   换字符换行。优点是看上去左右都对齐，缺点是行末的单词会被截断，影响阅读。

keep-all——    单词不换行。超出的就显示到元素外

normal——      看上去和keep-all一样。

新的问题来了，normal和keep-all到底有没有区别？我们加上汉字试试

看出区别了吗？ 

normal——对于汉字（严格来说是Chinese/Japanese/Korean (CJK)）会换字符自动换行

keep-all——对CJK文字，也只按空白和符号换行。

所以，如果我们希望文字显示达到如下条件

1、空格，换行尽量和原文一致

2、确实超出的自动换行

3、尽量不影响阅读（按单词换行）

需要设置的CSS为

white-space: pre-wrap;

word-break: break-word;

效果如下

最后，关于word-wrap，其实wror-wrap只是早期浏览器的word-break不完善时，对word-break的补充

word-wrap具有可选值为：break-word, normal。效果和word-break对应的值效果一样。