一、基本介绍
white-space 属性指定元素内文本如何处理换行符、空格和制表符等符号。
pre-wrap：合并空白符序列，换行符会被保留，遇到边界自动换行。
下面的例子说明了 white-space:pre-wrap 属性的使用方法：
代码：
div {
white-space: pre-wrap;
}
示例：
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod eu nisi sed ultrices. Phasellus vulputate risus a vestibulum.
二、不同类型空白符的处理方式
1、空格符
white-space属性中的pre-wrap可以处理连续输入的空格符，而浏览器默认是只显示一个空格符号，不连续多个空格符也只显示一个。
代码：
div {
white-space: pre-wrap;
}
示例：
hello world
结果： hello world
2、制表符
制表符被渲染为一个固定宽度的空白字符，white-space属性同样可以处理连续制表符。
代码：
div {
white-space: pre-wrap;
}
示例：
hello world
结果： hello world
3、回车符
white-space属性可以处理输入的enter回车符，自动换行，直到换到新的行。
代码：
div {
white-space: pre-wrap;
}
示例：
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Sed euismod eu nisi sed ultrices.
结果：
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Sed euismod eu nisi sed ultrices.
4、换行符
white-space属性的pre-wrap还可以处理输入的换行符，和回车符的处理方式类似。
代码：
div {
white-space: pre-wrap;
}
示例：
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Sed euismod eu nisi sed ultrices.
结果：
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Sed euismod eu nisi sed ultrices.
三、white-space与其它CSS属性的使用组合
white-space属性不是孤立的，它可以和其它CSS属性一起使用，产生意想不到的效果。
1、与overflow结合，自动出现滚动条
代码：
div {
white-space: pre-wrap;
overflow: auto;
width: 150px;
height: 100px;
}
示例：
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod eu nisi sed ultrices. Phasellus vulputate risus a vestibulum.
2、与word-wrap结合，单词自动换行
代码：
div {
white-space: pre-wrap;
word-wrap: break-word;
width: 150px;
}
示例：
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod eu nisi sed ultrices. Phasellus vulputate risus a vestibulum.
四、white-space与实际应用实例
white-space属性在实际应用中具有广泛的使用场景，例如代码块的处理、日志分析等领域都可以用到white-space属性。
代码块实例：
.banner {
width: 900px;
height: 500px;
background-image: url(bg.jpg);
background-repeat: no-repeat;
background-size：cover;
}
日志分析实例：
代码：
div {
white-space: pre-wrap;
}
示例：
20xx-xx-xx xx:xx:xx,xxx [INFO ] [应用名称] [类名] - 应用启动成功
20xx-xx-xx xx:xx:xx,xxx [WARN ] [应用名称] [类名] - 服务暂停，正在恢复中...
