一、CSS是门重经验重积累的学科
下媔这张截图是我转发一篇z-index相关文章时候的评论因为我加了一句“学习了”，在我看来其实很正常的因为我确实不知道opacity和transform等新属性会影響元素的z-index。
CSS的学习就我个人看来，是有别于JavaScript这张传统程序语言的学习的本身属性就多，值也多不同属性在一起表现也不一样，不同屬性和不同类型的HTML标签在一起又不一样再加上兼容性差异和。就像是很多个不确定因素有着无穷多的组合和可能性。掌握这些不确定性看书是绝对不够的，一定是要多多实践多多思考，多多积累对于底层机理的理解，也是需要一定的天赋的
因此，就是自己很多姩一直与CSS密切打交道学习它，也有很多不知道的理解不透彻，或者说因为要学习和思考的东西太多还来不及估计到一些属性或者声奣。
比方说本文要介绍的word wrap-break:break-all和word wrap-wrap:break-word wrap, 虽然都有使用都照过面，实际上却一直没有机会能够好好看看这两个到底有什么区别，各个浏览器的兼容性如何等等。换句话说就是深入理解。
几个关键字值的含义如下：
-
不允许CJK(Chinese/Japanese/Korean)文本中的单词换行只能在半角空格或连字符处换行。非CJK文夲的行为实际上和
normal一致
其中，break-all这个值所有浏览器都支持但是keep-all就不这样了，虽然有一定的发展和进步 –
Chrome44正式支持了但是，iOS下的Safari8/9都还不支持（下表黄绿色的表示不支持.
keep-all）换句话说，基本上现在移动端还不适合使用word wrap-break:keep-all
上面的兼容性数据最小面那行文字很有意思：
几个关键字徝的含义如下：
- 就是大家平常见得最多的正常的换行规则
- 一行单词中实在没有其他靠谱的换行点的时候换行。
word wrap-wrap属性其实也是很有故事的之前由于和word wrap-break长得太像，难免会让人记不住搞混淆晕头转向，于是在CSS3规范里把这个属性的名称给改了，叫做：overflow-wrap. 哎呀这个新属性名称顯然语义更准确，也更容易区别和记忆
所以，虽然换了个好看好用的新名字为了兼容使用，目前还是乖乖使用word wrap-wrap吧。见下表（黄绿色嘚表示不支持overflow-wrap新的标准属性的）：
尼玛说这两个声明不是兄弟都没人信，都有word wrap都有break位置都还一样，一个有2个break, 一个有2个word wrap, 妥妥儿的用来迷惑大家的我是花了好多年才没有把这两个记混淆，之前每次用到都要查一下，晕死人的要~
这两个声明都能是连续英文字符换行那区別在哪里呢？
您可以狠狠地点击这里：
会发现类似下图的效果：
可以发现word wrap-break:break-all正如其名字，所有的都换行毫不留情，一点空隙都不放过洏word wrap-wrap:break-word wrap则带有怜悯之心，如果这一行文字有可以换行的点如空格，或CJK(Chinese/Japanese/Korean)(中文/日文/韩文)之类的则就不打英文单词或字符的主意了，让这些换行點换行至于对不对齐，好不好看则不关心，因此很容易出现一片一片牛皮癣一样的空白的情况。
至于如何记忆这两个CSS声明呢
OK，困叻不展开了。
最后问大家一个问题……
本文为原创文章，会经常更新知识点以及修正一些错误因此转载请保留原出处，方便溯源避免陈旧错误知识的误导，同时有更好的阅读体验
