点击右上方红色按钮关注“小郑搞码事”，每天都能学到知识，搞懂一个问题！
为什么很难搞懂？看完了这篇文章后，你就知道原因了，同时也会彻底搞明白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。这样更有语义，助于理解，但出于兼容性问题，提醒慎用。
閱讀更多 小鄭搞碼事 的文章
