white-space [normal | pre | pre-wrap | pre-line | nowrap]
css中的white-space属性用来设置文本中空白字符的处理方式，其中空白字符包括空格，tab, 换行符等，可取值有：
normal：合并空白字符（多个空格或tab会被合并为一个空格），忽略换行符，允许根据容器宽度自动换行（下面简称自动换行）
nowrap：合并空白字符，忽略换行符，不允许自动换行（这时想换行只能通过插入br标签来实现）
pre：保留所有空白字符和换行符，不允许自动换行
pre-wrap：保留所有空白字符和换行符，允许自动换行
pre-line：合并空白字符，保留换行符，允许自动换行
注：white-space设置不同的值时，不论换行符是否被保留，当文本遇到br标签时都一定会换行。例如下面的测试文本中，don't you cry后面用了一个<br/>，I may not后面用了一个换行符，可以看到所有取值中don't you cry后面都换行了，而I may not后则不一定会换行。
下面是测试代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>white-space</title> <style> h1,div { text-align: center; } div {margin-top: -10px; margin-bottom: 20px;} h3 {margin: 0;} p {width: 500px; background: pink; color: blue; overflow: auto;} .normal {white-space: normal;} .nowrap {white-space: nowrap;} .pre {white-space: pre;} .pre-wrap {white-space: pre-wrap;} .pre-line {white-space: pre-line;} </style> </head> <body> <h1>white-space [normal | nowrap | pre | pre-wrap | pre-line]</h1> <div>注：white-space设置不同的值时，不论换行符是否被保留，遇到br标签一定会换行</div> <h3>normal（合并空白字符，忽略换行符，允许根据容器宽度自动换行（下面简称自动换行））</h3> <p class="nomarl"> Come, stop your crying, it will be all right, Just takes my hand, hold it tight. I'll protect you from all around you, I'll be here, don't you cry</br> When destiny calls you, you must be strong, I may not be with you, but you've got to hold on. They'll see in time,I know... </p> <h3>nowrap（合并空白字符，忽略换行符，不允许自动换行）</h3> <p class="nowrap"> Come, stop your crying, it will be all right, Just takes my hand, hold it tight. I'll protect you from all around you, I'll be here, don't you cry</br> When destiny calls you, you must be strong, I may not be with you, but you've got to hold on. They'll see in time,I know... </p> <h3>pre（保留所有空白字符和换行符，不允许自动换行）</h3> <p class="pre"> Come, stop your crying, it will be all right, Just takes my hand, hold it tight. I'll protect you from all around you, I'll be here, don't you cry</br> When destiny calls you, you must be strong, I may not be with you, but you've got to hold on. They'll see in time,I know... </p> <h3>pre-wrap（保留所有空白字符和换行符，允许自动换行）</h3> <p class="pre-wrap"> Come, stop your crying, it will be all right, Just takes my hand, hold it tight. I'll protect you from all around you, I'll be here, don't you cry</br> When destiny calls you, you must be strong, I may not be with you, but you've got to hold on. They'll see in time,I know... </p> <h3>pre-line（合并空白字符，保留换行符，允许自动换行）</h3> <p class="pre-line"> Come, stop your crying, it will be all right, Just takes my hand, hold it tight. I'll protect you from all around you, I'll be here, don't you cry</br> When destiny calls you, you must be strong, I may not be with you, but you've got to hold on. They'll see in time,I know... </p> </body> </html>
经测试，在FF/Opera/Safari/Chrome/IE10/9/8中显示效果基本一致，以下是FF中的显示效果：
在IE7中，由于不识别pre-wrap和pre-line，整条声明会被忽略, 因此white-space将取默认值normal, 即IE7及更早版本中pre-wrap和pre-line与normal效果相同：
另外需要注意的一点是，pre和nowrap由于不允许自动换行，文本可能会超出容器的边界，在上面的例子中我们之所以能看到它们，是因为容器没有显示设置overflow的值（这时overflow取默认值visible）, 如果我们显示地将overflow设置为hidden或auto，则超出的文本将不可见或出现横向滚动条：
1.容器设置了overflow: auto; 时，FF/Opera/Safari/Chrome/IE10/9/8/7显示效果一致，IE6会显示纵向滚动条：
FF/Opera/Safari/Chrome/IE10/9/8/7只出现横向滚动条
IE6会出现纵向滚动条
2.容器设置了overflow: hidden时， FF/Opera/Safari/Chrome/IE10/9/8/7/6显示效果一致:
posted on
