了解 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：允许任意非 CJK(Chinese/Japanese/Korean)文本间的单词断行。
- keep-all：不允许 CJK(Chinese/Japanese/Korean)文本中的单词换行，只能在半角空格或连字符处换行。非 CJK 文本的行为实际上和 normal 一致。
了解 word-wrap 属性(猪脚)
/* 关键字值 */
word-wrap: normal;
word-wrap: break-word;
/* 全局值 */
word-wrap: inherit;
word-wrap: initial;
word-wrap: unset;
- normal：就是大家平常见得最多的正常的换行规则。
- break-word：一行单词中实在没有其他靠谱的换行点的时候换行。
word-wrap 属性其实也是很有故事的，之前由于和 word-break 长得太像，难免会让人记不住搞混淆，晕头转向，于是在 CSS3 规范里，把这个属性的名称给改了，叫做：overflow-wrap. 哎呀，这个新属性名称显然语义更准确，也更容易区别和记忆。
兼容情况
所以，虽然换了个好看好用的新名字，为了兼容使用，目前，还是乖乖使用 word-wrap 吧。兼容性见下表（黄绿色的表示不支持 overflow-wrap 新的标准属性的）：
回归重点，word-break:break-all 和 word-wrap:break-word 的区别
尼玛，说这两个声明不是兄弟都没人信，都有 word 都有 break，位置都还一样，一个有 2 个 break, 一个有 2 个 word, 妥妥儿的用来迷惑大家的。我是花了好多年才没有把这两个记混淆，之前，每次用到都要查一下，晕死人的要~
可以发现，word-break:break-all 正如其名字，所有的都换行，毫不留情，一点空隙都不放过。
word-wrap:break-word 则带有怜悯之心，如果这一行文字有可以换行的点，如空格，或 CJK(Chinese/Japanese/Korean)(中文/日文/韩文)之类的，则就不打英文单词或字符的主意了，让这些换行点换行，至于对不对齐，好不好看，则不关心，因此，很容易出现一片一片牛皮癣一样的空白的情况。
结束语，扯下 word-spacing 和 white-space
- word-spacing 是单词之间间距的
- white-space 是字符是否换行显示的。
