#书摘 #css #前端
《CSS 世界》关于 word-break 和 word-wrap
1. 首先了解一下word-break属性，语法如下：
-
-
-
2. 接下来是 word-wrap
-
word-wrap 之前由于和 word-break 长得太像，难免会让人记不住或搞混，于是在 CSS3 规范里，这个属性的名称被修改了，叫作 `overflow-wrap`。这个新属性名称显然语义更准确，也更容易区别和记忆。但是，也就 Chrome 和 Safari 等 WebKit 或 Blink 浏览器支持这个新属性。因此，虽然换了个好看好用的新名字，为了兼容性，目前还是乖乖地使用word-wrap吧。(我说怎么这俩一样)
3. 区别：
word-break:break-all 的作用是所有的都换行，毫不留情，一点儿空隙都不放过，而 word-wrap:break-word 则带有怜悯之心，如果这一行文字有可以换行的点，如空格或 CJK（中文/日文/韩文）之类的，就不打英文单词或字符的主意了，在这些换行点换行，至于对不对齐、好不好看则不关心，因此，很容易出现一片一片空白区域的情况。
《CSS 世界》关于 word-break 和 word-wrap
1. 首先了解一下word-break属性，语法如下：
word-break: normal;
word-break: break-all;
word-break: keep-all;
-
normal ：使用默认的换行规则。-
break-all ：允许任意非 CJK（Chinese/Japanese/Korean）文本间的单词断行。-
keep-all ：不允许 CJK 文本中的单词换行，只能在半角空格或连字符处换行。非 CJK 文本的行为实际上和 normal 一致。
break-all keep-all 就不这样了，虽然有一定的发展和进步，但目前移动端还不适合使用 word-break:keep-all 。 另外，Chrome、Safari 以及其他 WebKit 或 Blink 浏览器还支持非官方标准的 break-word 值，其表现就和 word-wrap:break-word 一样，这个知识了解一下即可。2. 接下来是 word-wrap
word-wrap: normal;
word-wrap: break-word;
normal ：就是大家平常见得最多的正常的换行规则。-
break-word ：一行单词中实在没有其他靠谱的换行点的时候换行。word-wrap 之前由于和 word-break 长得太像，难免会让人记不住或搞混，于是在 CSS3 规范里，这个属性的名称被修改了，叫作 `overflow-wrap`。这个新属性名称显然语义更准确，也更容易区别和记忆。但是，也就 Chrome 和 Safari 等 WebKit 或 Blink 浏览器支持这个新属性。因此，虽然换了个好看好用的新名字，为了兼容性，目前还是乖乖地使用word-wrap吧。(我说怎么这俩一样)
3. 区别：
word-break:break-all 的作用是所有的都换行，毫不留情，一点儿空隙都不放过，而 word-wrap:break-word 则带有怜悯之心，如果这一行文字有可以换行的点，如空格或 CJK（中文/日文/韩文）之类的，就不打英文单词或字符的主意了，在这些换行点换行，至于对不对齐、好不好看则不关心，因此，很容易出现一片一片空白区域的情况。
