站长资源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>
评论前必须登录！
注册