CSS中的white-space, word-wrap, word-break（较浅显，待后续修正）

white-space, word-wrap, word-break这三个css属性大致看来都是控制行内字符换行规则的，其中：

white-space的值有：

white-space: normal
white-space: nowrap
white-space: pre
white-space: pre-wrap
white-space: pre-line
white-space: inherit
white-space: unset

默认值是normal, 意思是按照一般的换行规则进行换行（？这里的一般换行规则我并没有搞清楚），需要注意的是nowrap值，意思是不允许行内换行。简而言之，white-space属性是控制行内是否可以换行的。

word-wrap的值有：

word-wrap: normal;
word-wrap: break-word;
word-wrap: inherit;
word-wrap: initial;
word-wrap: unset;

默认值是normal, 需要注意的是break-word值，鑫旭大神的解释是：

如果这一行文字有可以换行的点，如空格，或CJK(Chinese/Japanese/Korean)(中文/日文/韩文)之类都没有的话，则就不打英文单词或字符的主意了，让这些换行点换行，至于对不对齐，好不好看，则不关心，因此，很容易出现一片一片牛皮癣一样的空白的情况。

意思大致是尽量不在英文单词中间强制换行，但是如果没有空格，连字符，中文/日文/韩文之类的话，就只能在英文字符中间换行了,这样会导致换行的位置不一致。
这里稍微要注意的是这个属性在CSS3中改名叫overflow-wrap了，但是目前兼容性并不十分友好。

word-break的值有：

word-break: normal 
word-break: break-all 
word-break: keep-all
word-break: inherit
word-break: initial
word-break: unset

默认值是normal，这里需要注意的是break-all和keep-all两个值，break-all意思是不管三七二十一，文本超出容器就进行换行，keep-all意思是不管三七二十一，都不进行换行。

所以：word-wrap和word-break是控制如何进行换行的，且word-wrap:break-word和word-break: break-all效果基本一致。

同时经过实践得出，在chrome浏览器中white-space的优先级最高，只要设置了nowrap，不管你怎样设置换行方式（word-break和word-wrap值）都不会进行换行。word-wrap优先级次之，设置其为beak-word以后，再设置word-break值为keep-all并没有什么卵用。

插播一句：如果想原样显示你的东西，请使用pre标签