您当前的位置：首页 > 计算机 > 编程开发 > Html+Div+Css（前端）

white-space控制空白的处理行为

时间：06-15来源：作者：点击数：52

white-space用于控制HTML元素对元素内文本中空白的处理方式。该属性支持如下几个属性值。

normal:默认属性值。浏览器忽略文本中的空白。

pre:浏览器保留文本中的所用空白，其行为方式类似于<pre.../>标签。

nowrap:文本不会换行,文本会在同一行上继续，知道遇到<br.../>标签为止。

pre-wrap:保留空白符序列，但可以正常换行。

pre-line:合并空白符序列，但保留换行符。

inherit:指定从父元素继承white-space属性的值。

下面页面代码示范了white-space属性对文本中空白的处理行为。

<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> white-space </title>
	<style type="text/css">
	/* 为div元素增加边框 */
	div{
		border:1px solid #000000;
		height: 80px;
		width: 240px;
	}
	</style>
</head>
<body>
<!-- 忽略文本中的空白、换行符 -->
white-space:normal <div style="white-space:normal">
The root interface   in    
the     collection     hierarchy. </div>
<!-- 保留文本中所有空白、换行符 -->
white-space:pre <div style="white-space:pre">
The root interface   in    
the     collection     hierarchy. </div>
<!-- 忽略文本中空白，换行符，强制不换行 -->
white-space:nowrap <div style="white-space:nowrap">
The root interface   in    
the     collection     hierarchy. </div>
<!-- 保留文本中空白序列，换行符 -->
white-space:pre-wrap <div style="white-space:pre-wrap">
The root interface   in    
the     collection     hierarchy. </div>
<!-- 合并文本中空白序列，保留换行符 -->
white-space:pre-line <div style="white-space:pre-line">
The root interface   in    
the     collection     hierarchy. </div>
</body>
</html>