CSS中word-wrap、word-break的区别

相信大家写CSS的时候也会经常遇到这几个属性，而且它们看起来还蛮像的，但是每次需要加换行的时候，都得查一下，总是记不住。

word-wrap：属性规定自动换行的处理方法。

/* 关键字值 */
word-wrap: normal;
word-wrap: break-word;

/* 全局值 */
word-wrap: inherit;
word-wrap: initial;
word-wrap: unset;

normal：表示在正常的单词结束处换行。
break-word：表示如果行内没有多余的地方容纳该单词到结尾，则那些正常的不能被被分割的单词会被强制分割换行。

不过很有意思的是MDN上竟然对这个属性名改成了overflow-wrap（我也是刚刚才知道。。。），它原来是微软的一个私有属性，现在word-wrap被当作overflow-wrap的备选写法，只不过并不是所有浏览器都兼容，还是乖乖使用word-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：对于non-CJK (CJK 指中文/日文/韩文) 文本，可在任意字符间断行。
keep-all：CJK 文本不断行。 Non-CJK 文本表现同 normal。

OK，介绍了一下这两个属性，下面来具体看一下它们的区别

word-wrap：

normal: 单词太长时会换行，若超出一行会溢出。
break-word: 如果这一行有可以换行的点，如空格或CJK之类的，就让这些换行，否则会让英文单词或字符换行，这样很可能会出现不对齐的现象。

word-break：

normal：使用默认的断行规则。
break-all: 会对所有内容都换行，非常霸道。
keep-all: 放不下了，就另起一行展示，再放不下，也不折行。

在 Can I use 上对这个属性有这样一句提示：

Chrome, Safari and other WebKit/Blink browsers also support the unofficial break-word value which is treated like word-wrap: break-word.

翻译成中文意思是：

Chrome, Safari以及其他WebKit/Blink浏览器还支持费非官方标准的break-word值，其表现就和word-wrap: break-word一样。

怪不得见过word-break:break-word这个样式，但MDN上没有，原来是非官方的，而且它等同于word-wrap: break-word。