共计 1141 个字符，预计需要花费 3 分钟才能阅读完成。
大家都晓得在 CSS3 中减少了很多新的属性，其中 word-break 和 word-wrap 就是用来给文本换行应用的，然而两者有什么区别很多小伙伴都不是很分明。明天就来通知你他们到底有什么不同，应该用在哪里。
word-break 它的属性值一共有 3 个，其中的几个属性值的含意具体解释如下：normal: 示意默认值，即默认的的换行规定。break-all: 示意强行换行，意思就是容许任意非文本间 (比方网址类型的等) 的单词断行。keep-all: 也示意换行，但不容许文本中的单词换行，只能在半角空格或连字符处换行。其中，在这三个属性值中，break-alwww.diuxie.coml 这个属性值是所有浏览器都反对，然而 keep-all 就不这样了，尽管有肯定的倒退和提高，但目前挪动端还不适宜应用 word-break : keep-all。它有两个属性值，其中的几个属性值的含意具体解释如下：normal: 就是默认值，就是失常的换行规定。break-word: 示意一行单词中切实没有其余靠谱的换行点的时候才进行换行。其实大家会发现，word-break 和 word-wrap 其实是长得比拟像的，而且属性值也有类似之处，其实 word-wrap 属性也是很有故事的，它之前因为和 word-break 长得太像，难免会让人记不住或搞混，所以在 CSS3 标准里，这个属性的名称被批改了，叫作 overflow-wrap。尽管这个新属性名称改了下，显得语义更精确，但 www.diuxie.com 也更容易区别和记忆。另外，在 Chrome 和 Safari 等 WebKit 内核的浏览器仅反对这个新属性。因而，尽管换了个难看好用的新名字，然而为了兼容性，目前还是乖乖地应用 word-wrap 吧。通过上面上面持续来唠唠这连个属性的到底有啥区别呢？word-break: break-all 和 word-wrap: break-word。首先，两者长相神似，都有 word，都有 break，手游的地位都还一样，一个有两个 break，一个有两个 word; 其次，两者的性能作用也相似，这两个申明都能使间断英文字符换行，那么它们的区别到底是什么? 上面给大家举个例子阐明一下：
综上所述，word-break: break-all; 的作用是所有的都换行，很王道的那种，毫不留情，一点儿空隙都不放过的那种换行，而 word-wrap:break-word 则略微温顺点儿，带有一点怜悯之心，如果这一行文字有能够换行的点，如空格之类的，就不打英文单词或字符的主见了，在这些换行点换行，至于对不对齐、好不好看则不关怀，因而，很容易呈现一片一片空白区域的状况。以上就是 word-break 和 word-wrap 属性区别的介绍了，同学们在开发过程中依据理论状况去抉择即可。正文完