关于white-space、word-break和break-wrap

一直以来都只是知道这三个属性都可以在某种情形下控制是否换行，但具体该使用哪一个属性不是很清楚，实战时就一个个试，哪个管用用哪个，今天整理了一下这三个属性具体的意义。

一、white-space

white-space 是用来设置如何处理元素内的空白的，这里的空白不仅仅指的空格，还包括换行符，所以它才能对文本是否换行有所控制。他的可选值和对应的描述如下：

1.normal：默认。空白会被浏览器忽略。也即是我们通常所知的连续的空白会合并为一个空格，行首的空格会完全忽略

2.pre：空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。

3.nowrap：文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。

4.pre-wrap：保留空白符序列，但是正常地进行换行。实际使用时跟pre作用类似

5.pre-line：合并空白符序列，但是保留换行符。

二、word-wrap

word-wrap 属性允许长单词或 URL 地址换行到下一行。他的可选值和对应的描述如下：

1.normal：只在允许的断字点换行（浏览器保持默认处理）。即使单词长度超过容器宽度也不换行。

2.break-word：在长单词或 URL 地址内部进行换行。

三、word-break

word-break 属性规定自动换行的处理方法。他的可选值和对应的描述如下：

1.normal：使用浏览器默认换行规则

2.break-all：允许在单词内换行。

3.keep-all：只能在半角空格或连字符处换行。

单从介绍来看，word-wrap:break-word和word-break:break-all似乎是一样的，都是允许单词内换行，但两者有着很重要的不同之处。

首先要明确一点，word-wrap:break-word是针对长单词或者连续字符串的，它只有在单个单词长度超过容器宽度的时候才会起作用。

而word-break:break-all不一样，它是针对一行文字的，normal下，当一行文本超过容器宽度时会将最后一个单词放到下一行显示，而break-all会将最后一个单词断行显示，以最大程度的铺满第一行。