一、CSS是门重经验重积累的学科
下面这张截图是我转发一篇 z-index 相关文章时候的评论，因为我加了一句“学习了”，在我看来其实很正常的，因为我确实不知道 opacity 和 transform 等新属性会影响元素的 z-index 。
CSS的学习，就我个人看来，是有别于JavaScript这张传统程序语言的学习的。本身属性就多，值也多，不同属性在一起表现也不一样，不同属性和不同类型的HTML标签在一起又不一样，再加上兼容性差异和未定义行为。就像是很多个不确定因素，有着无穷多的组合和可能性。掌握这些不确定性，看书是绝对不够的，一定是要多多实践，多多思考，多多积累。对于底层机理的理解，也是需要一定的天赋的。
因此，就是自己很多年一直与CSS密切打交道，学习它，也有很多不知道的，理解不透彻，或者说因为要学习和思考的东西太多，还来不及估计到一些属性或者声明。
比方说本文要介绍的 word-break:break-all 和 word-wrap:break-word , 虽然都有使用，都照过面，实际上，却一直没有机会能够好好看看这两个到底有什么区别，各个浏览器的兼容性如何，等等。换句话说，就是深入理解。
二、了解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
允许任意非CJK(Chinese/Japanese/Korean)文本间的单词断行。
keep-all
不允许CJK(Chinese/Japanese/Korean)文本中的单词换行，只能在半角空格或连字符处换行。非CJK文本的行为实际上和 normal 一致。
其中， break-all 这个值所有浏览器都支持。但是 keep-all 就不这样了，虽然有一定的发展和进步 – Chrome44正式支持了，但是，iOS下的Safari8/9都还不支持（下表黄绿色的表示不支持 keep-all ）。换句话说，基本上现在移动端还不适合使用 word-break:keep-all .
上面的兼容性数据最小面那行文字很有意思：
Chrome, Safari and other WebKit/Blink browsers also support the unofficialbreak-word value which is treated like word-wrap: break-word .
翻译成简体中文就是：
Chrome, Safari以及其他WebKit/Blink浏览器还支持费官方标准的 break-word值，其表现就和 word-wrap: break-word 一样。
OK，另外一个男主角登场了， word-wrap .
三、了解word-wrap属性
展示的语法为：
/* 关键字值 */
word-wrap: normal;
word-wrap: break-word;
/* 全局值 */
word-wrap: inherit;
word-wrap: initial;
word-wrap: unset;
几个关键字值的含义如下：
normal
就是大家平常见得最多的正常的换行规则。
break-word
一行单词中实在没有其他靠谱的换行点的时候换行。
word-wrap 属性其实也是很有故事的，之前由于和 word-break 长得太像，难免会让人记不住搞混淆，晕头转向，于是在CSS3规范里，把这个属性的名称给改了，叫做： overflow-wrap . 哎呀，这个新属性名称显然语义更准确，也更容易区别和记忆。
但是呢，恕我赵某咳两声，也就Chrome/Safari等WebKit/Blink浏览器支持。
所以，虽然换了个好看好用的新名字，为了兼容使用，目前，还是乖乖使用 word-wrap 吧。兼容性见下表（黄绿色的表示不支持 overflow-wrap 新的标准属性的）：
四、回归重点，word-break:break-all和word-wrap:break-word的区别
尼玛，说这两个声明不是兄弟都没人信，都有 word 都有 break ，位置都还一样，一个有2个 break , 一个有2个 word , 妥妥儿的用来迷惑大家的。我是花了好多年才没有把这两个记混淆，之前，每次用到都要查一下，晕死人的要~
这两个声明都能是连续英文字符换行，那区别在哪里呢？
您可以狠狠地点击这里：
会发现类似下图的效果：
可以发现， word-break:break-all 正如其名字，所有的都换行。毫不留情，一点空隙都不放过。而 word-wrap:break-word 则带有怜悯之心，如果这一行文字有可以换行的点，如空格，或CJK(Chinese/Japanese/Korean)(中文/日文/韩文)之类的，则就不打英文单词或字符的主意了，让这些换行点换行，至于对不对齐，好不好看，则不关心，因此，很容易出现一片一片牛皮癣一样的空白的情况。
OK, 应该很容易get这个tips的。
至于如何记忆这两个CSS声明呢？
首字母走起：wbba(微博吧), wwbw(我五百万).
五、结束语，扯下word-spacing和white-space
word-spacing 是单词之间间距的， white-space 是字符是否换行显示的。
OK，困了，不展开了。
最后，问大家一个问题……
背景
某天老板在群里反馈，英文单词为什么被截断了？
很显然，这是我们前端的锅，自行背锅。这个问题太简单了，css里加两行属性，分分钟搞定。
| 1 2 | word-break: keep-all; word-wrap: break-word; |
开心的提交代码，刷新页面。我擦，怎么还是没有断词？不可能啊！！！ 难道这两个属性有什么兼容性问题或者有什么限制条件？为了不搬石头砸自己的脚，还是去深入了解一下。
css单词断词、换行
关键字： word-break, word-wrap
提前声明：上面的问题用这两个属性来解决并没有什么问题，这里只是再加深巩固一下知识。想了解原因的同学请直接看下一小节。
word-break, word-wrap这两个属性都比较常见，断词、溢出显示省略号等常见功能都需要用到它们。但具体它们分别是什么意思，各自有什么属性，可能很多人都不是很清楚。反正我不懂。每次都是从网上查一查就用上了，两个属性长得太像了，总是记不住。
来，先看文档。
| 1 | word-break: normal | break-all | keep-all; |
normal 使用浏览器默认的换行规则。
break-all 允许在单词内换行。 keep-all 只能在半角空格或连字符处换行。| 1 | word-wrap: normal | break-word; |
normal 只在允许的断字点换行（浏览器保持默认处理）。
break-word 在长单词或 URL 地址内部进行换行。看懂了吗？反正我好像没看懂。
看图貌似会好点。
相信大概能看明白了，我简单总结下：
1. word-break 当行尾放不下一个单词时，决定单词内部该怎么摆放。
break-all: 强行上，挤不下的话剩下的就换下一行显示呗。霸道型。 keep-all: 放不下我了，那我就另起一行展示，再放不下，我也不退缩。傲骄型。2. word-wrap 当行尾放不下时，决定单词内是否允许换行
normal: 单词太长，换行显示，再超过一行就溢出显示。 break-word: 当单词太长时，先尝试换行，换行后还是太长，单词内还可以换行。3. 上面这些换行神马的都是针对英文单词，像CJK(中文/日文/韩文)这样的语言就算了，因为他们不需要，不信你读一下下面的文字
研表究明，汉字的序顺并不定一能影阅响读，比如当你看完这句话后，才发这现里的字全是都乱的。
这样子都可以流畅阅读，更别说断词了…
再回头来看我们的问题，理论上加上了word-break: keep-all;word-wrap: break-word;应该没问题了，看来还有别的坑。
空格转换
关键字： white-space
确认word-break和word-wrap使用方法没有错后，开始检查我们自己的代码。抓包发现，后台同学返回的文本里空格全部以 来代替。
what？为什么要用转义字符代替？为什么css不能识别这个转义空格？
电话后台同学，告知：在很早之前的为了解决某个前端问题才这么做的。
抓耳挠腮，使劲回忆了下，确实有这么回事。 因为浏览器会自动将多个空格压缩为一个空格显示。为了还原用户的原本输入，才将空格进行html转义。1. 很多用户会用空格来换行或者实现宽字间距
2. 字符画也很好玩，压缩空格就全乱了。不知道字符画的请看下面
专业的字符画制作人员会用全角空格来做，这样就不担心浏览器的空格合并问题了
ok,那 暂时还不能动它。
为什么浏览器会自动压缩空格？
1. 规范如此,就是这么任性
2. 如果不自动压缩空格，那我们写html的时候就只能写成1行了，否则先这样的代码就会出现大段的空白。
3.
| 1 2 3 4 5 | <div> <div> bananas </div> </div> |
既然规范这么定了，埋了坑，肯定会想办法让你绕过的，想起了white-space。
white-space我们更多的时候只用到nowrap的属性，来配合实现…的特效，实际它还有更多的姿势未解锁。| 1 2 | white-space: normal | nowrap | pre | pre-wrap | pre-line 我们重点关注pre开头的几个属性。pre是preserve(保留)的缩写。没错，它就跟保留空格有关系。 |
pre: 保留所有的空格和回车，且不允许折行。
pre-wrap: 保留所有的空格和回车，但是允许折行。 pre-line: 会合并空格，且允许折行意思简单明了，好像也不用解释什么。
所以我们的解决方案来了：
后台按照用户的输入的原始空格返回，不用做转义，前端加上| 1 2 3 | word-break: keep-all; word-wrap: break-word; white-space: pre-wrap; |
蹭蹭蹭修改完，貌似没什么问题。
不过，这些个属性都是作用于Text上的，而我们的页面里有很多都是富文本，如果将pre-wrap作用于富文本上的父节点上也会有同样的功效吗？
带着疑问，测试了几个富文本，果然出现了大段空白….富文本里的html标签之间有空格。
有兴趣的同学可以在
的body上加上white-space:pre-wrap看看效果。
那富文本的问题要怎么解决呢，黑科技登场了！！
无法反抗，那就享受吧。
既然浏览器会压缩多个空格，那只要保证文本里每次只有一个空格相邻不就可以了。 □ -> □ □□ -> □ □□□ -> □ □ □□□□ -> □ □ 自动规避了浏览器的合并空格策略。这个思路来自于富文本编辑器，写过富文本编辑器的同学可能会不屑一顾，这个方案我们都用烂了.. 感谢你们！！
(写个富文本编辑器是学习前端的最佳方式，欢迎闲的蛋疼的同学快去踩坑)通知后台同学按照这个规则来改，问题搞定。
总结
1. word-wrap： 决定句尾放不下单词时，单词是否换行
2. word-break: 决定单词内该怎么换行
3. 平文本可以配合white-space: pre-wrap来解决多空格压缩显示问题
4. 富文本采用的解决方案是对空格进行间隔html转义，这种方法更灵活，可以适应不同的场景，也适用于平文本。