点击右上方红色按钮关注“小郑搞码事”，每天都能学到知识，搞懂一个问题！

为什么很难搞懂？看完了这篇文章后，你就知道起因了，同时也会彻底搞明白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时的状态是：文本中连续英文字符不换行。

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