CSS - white-space 属性

CSS white-space 属性用于控制元素中文本内部的空白流动。

可能的值

• normal：默认值，其中空格序列被折叠，当文本达到可用宽度时，文本换行到下一行。
• nowrap：空格折叠，文本不会换行到下一行。它在同一条线上继续，溢出可用宽度。
• pre：完全保留 HTML 代码中的空格。换行符和多个空格按原样显示。
• pre-wrap：保留 HTML 代码中的换行符和空格。
• pre-line：折叠空格，但保留换行符。当文本达到可用宽度时，文本将换行。
• break-spaces：折叠空格序列，但保留换行符并换行机会。这是一个实验值，可能并非在所有浏览器中都受支持。
• initial：将值设置为默认值，这是正常的。
• inherit：从其父元素继承值。

适用于

所有块级别元素。

DOM 语法

object.style.whiteSpace = "pre";

例

下面是一个示例：

<html>
<head>
<style>
	 	div {border:2px solid red; padding: 5px; margin: 2px; width: 300px; height: 100px;}
</style>
</head>
<body>
	 	<h2>留白</h2>
	 	<h4>normal</h4>
	 	<div>
	 	 	 <p style="white-space: normal;">空白是指任何空余空间，或是指那些不显示为可见符号、且对文本含义不产生任何影响的字符。</p>
	 	</div>
	 	<h4>pre</h4>
	 	<div>
	 	 	 <p style="white-space: pre;">空白是指任何空余空间，或是指那些不显示为可见符号、且对文本含义不产生任何影响的字符。</p>
	 	</div>
	 	<h4>nowrap</h4>
	 	<div>
	 	 	 <p style="white-space: nowrap;">空白是指任何空余空间，或是指那些不显示为可见符号、且对文本含义不产生任何影响的字符。</p>
	 	</div>
	 	<h4>pre-wrap</h4>
	 	<div>
	 	 	 <p style="white-space: pre-wrap;">空白是指任何空余空间，或是指那些不显示为可见符号、且对文本含义不产生任何影响的字符。</p>
	 	</div>
	 	<h4>pre-line</h4>
	 	<div>
	 	 	 <p style="white-space: pre-line;">空白是指任何空余空间，或是指那些不显示为可见符号、且对文本含义不产生任何影响的字符。</p>
	 	</div>
	 	<h4>break-spaces</h4>
	 	<div>
	 	 	 <p style="white-space: break-spaces;">空白是指任何空余空间，或是指那些不显示为可见符号、且对文本含义不产生任何影响的字符。</p>
	 	</div>
</body>
</html>