[TOC]

指定元素内的空白怎样处理

值：

normal | pre | nowrap | pre-wrap | pre-line

• normal：默认处理方式，合并文本间的空白距离（多个相邻空格合并成一个空格，），tab解析为空格，换行解析为空格，文字超出边界换行

• nowrap：合并文字间的空白距离，tab和换行解析为空格，文字超出边界不换行

• pre：不合并文字间的空白距离，保留tab，换行解析为tab并换行，文字超出边界时不换行

• pre-wrap：不合并文字间的空白距离，保留tab，换行解析为tab并换行，当文字超出边界时换行

• pre-line：保持文本的换行，不保留文字间的空白距离，换行仅解析为换行，文字碰到边界时发生换行

控制单词如何被拆分换行的

值：

normal | break-all | keep-all

word-break:keep-all：


所有“单词”一律不拆分换行，注意，我这里的“单词”包括连续的中文字符（还有日文、韩文等），或者可以理解为只有空格可以触发自动换行

word-break:break-all：


所有单词碰到边界一律拆分换行，不管你是incomprehensibilities这样一行都显示不下的单词，还是long这样很短的单词，只要碰到边界，都会被强制拆分换行。所以用word-break:break-all时要慎重呀。

这样的效果好像并不太好呀，能不能就把incomprehensibilities拆一下，其它的单词不拆呢？那就需要下面这个属性了

word-wrap又叫做overflow-wrap：

word-wrap 属性原本属于微软的一个私有属性，在 CSS3 现在的文本规范草案中已经被重名为 overflow-wrap 。 word-wrap 现在被当作 overflow-wrap 的 “别名”。 稳定的谷歌 Chrome 和 Opera 浏览器版本支持这种新语法。

这个属性也是控制单词如何被拆分换行的，实际上是作为word-break的互补，它只有两个值：normal | break-word，那我们看下break-word：


终于达到了上文我们希望的效果，只有当一个单词一整行都显示不下时，才会拆分换行该单词。 所以我觉得overflow-wrap更好理解好记一些，overflow，只有长到溢出的单词才会被强制拆分换行！

（前面的word-break属性除了列出的那三个值外，也有个break-word值，效果跟这里的word-wrap:break-word一样，然而只有Chrome、Safari等部分浏览器支持）

最后总结一下三个属性

• white-space，控制空白字符的显示，同时还能控制是否自动换行。它有五个值：normal | nowrap | pre | pre-wrap | pre-line
• word-break，控制单词如何被拆分换行。它有三个值：normal | break-all | keep-all
• word-wrap（overflow-wrap）控制长度超过一行的单词是否被拆分换行，是word-break的补充，它有两个值：normal | break-word

下面是本文里所有例子的代码的地址，每个属性做成了选项，方便操作学习~

https://codepen.io/YGYOOO/pen/jvyrWK

注：本文来自https://juejin.im/post/5b8905456fb9a01a105966b4#heading-2