为什么很难搞懂文本控制属性word-break和word-wrap的异同

为什么很难搞懂？看完了这篇文章后，你就知道原因了，同时也会彻底搞明白CSS用于控制文本的两个属性word-break和word-wrap的异同。

一、这样理解就记住了

【1、取值这样记】

word-break：normal（break-all）

word-wrap：normal（break-word）

可以看出，这两个属性分别有两个取值（其实还有些其它取值，出于目前兼容性问题，不列出来，免得干扰，可以了解），其中normal是都有的取值，其作用是默认效果，相当于就是不设置这个属性。不设置，可以不记normal，但是一定要知道不设置时，文本是怎么展示的，也就是说不设置时的效果是怎么样的，等会实例部分我会说。先记住不设置（默认）的状态是：

文本中连续英文字符不换行（不设置或者设置normal）

那么除去上面normal，其实每个属性都只要记住一个属性就行了。当设置这一个属性，对文本有什么样的控制作用了。实例部分我来讲，目前，一定要记住（所有浏览器都支持）：

word-break：break-all

word-wrap：break-word

【2、区别这样记】

看上面代码，这两个属性长的非常相似，属性名都有个word，取值都有个break。同时它们的位置也都一样。在深一点观察，上一行代码有两个break，下一行代码有两个word。好了，这些都是表象。最主要相似点是它们的功能作用非常相似。

功能都是：让连续英文字符换行。

二、用实例进一步验证

【1、取值normal实例】

也就是不设置或者将两个属性设置为normal时的状态是：文本中连续英文字符不换行。

来看一下实际例子中的表现：

死死抓住概念定义，上面url没有折行，在一行显示，当过长的话，会超出容器展示，总之，不换行显示，同时，下面的good单词也是连续显示，并没有将这个单词拆分开来显示。所以默认文本中连续英文字符不换行就是这个意思。

【2、取值break-区别实例】

第一，设置word-break：break-all时的状态：所有都换行，一点空隙都不放过。

同样看两个地方，上面的url和下面的单词good。很明显都折行显示了。

第二，设置word-wrap:break-word时的状态：如果一行文字中有可以换行的地方（如空格，中文等），就不让英文单词/字符换行。

由上图可以看出，完整单词不会换行，每个单词间都有换行的空格符。而url长度由于超出容器宽度，在容器内没有可换行的地方，导致字符换行。这一点和不设置（或设置normal）的区别所在。同时，要注意中文和字符之间有一段可恶的留白部分。

现在可以明白了，不设置时，文本可以超出容器显示，而word-wrap:break-word控制在容器内显示。

总结一下：

为什么这两个属性很容易搞混。就像我说的，它们长的太相似，所以在CSS3中将word-wrap改成overflow-wrap。这样更有语义，助于理解，但出于兼容性问题，提醒慎用。