一、white-space属性的常见值
* 原本格式:

1、white-space:normal
默认值,空格和换行符会被忽略过滤掉;宽度不够时文本会自动换行
* 宽度足够时,normal 处理后的格式

* 宽度不够时, normal 处理后的格式

2、white-space:nowrap
空格和换行符会被忽略过滤掉;宽度不够时不会自动换行
不会因为容器的大小自动换行,除非遇到<br>换行符
* 宽度足够时,nowrap 处理后的格式

* 宽度不够时,nowrap 处理后的格式

3、white-space:pre
同<pre>标签,空格和换行符会被保留显示,就算宽度不够时,格式也会按照原格式原样显示
* 宽度足够时,pre 处理后的格式

* 宽度不够时,pre 处理后的格式

4、white-space:pre-wrap
空格和换行符会被保留显示,当内容超出容器时自动换行
* 宽度足够时,pre 处理后的格式

* 宽度不够时,pre 处理后的格式

5、white-space:pre-line
保留显示换行符,多个连续的空格会被合并为一个空格显示;
适用于显示换行符,但是不想显示过多冗余的空格的场景;
注意:行首的空格并未显示
* 宽度足够时,pre-line处理后的格式

* 宽度足够时,pre-line处理后的格式

6、white-space:break-spaces
二、小结
1、white-space:normal和white-space:nowrap
空格和换行符会被忽略过滤掉;宽度不够时,前者文本会自动换行,后者不会自动换行
**2、**white-space:pre和white-space:pre-wrap
空格和换行符会被保留显示,宽度不够时,前者文本不会自动换行,后者会自动换行
3、 pre-line相比pre-wrap,后者不会合并多余的空格,使用时按照需求使用即可。
