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>White Space</h2>
	 	<h4>normal</h4>
	 	<div>
	 	 	 <p style="white-space: normal;">white space refers to any empty space or characters that do not display
	 	 	 a visible symbol or have any effect on the text's meaning</p>
	 	</div>
	 	<h4>pre</h4>
	 	<div>
	 	 	 <p style="white-space: pre;">white space refers to any empty space or characters that do not display	
	 	 	 a visible symbol or have any effect on the text's meaning</p>
	 	</div>
	 	<h4>nowrap</h4>
	 	<div>
	 	 	 <p style="white-space: nowrap;">white space refers to any empty space or characters that do not display	
	 	 	 a visible symbol or have any effect on the text's meaning</p>
	 	</div>
	 	<h4>pre-wrap</h4>
	 	<div>
	 	 	 <p style="white-space: pre-wrap;">white space refers to any empty space or characters that do not display	
	 	 	 a visible symbol or have any effect on the text's meaning</p>
	 	</div>
	 	<h4>pre-line</h4>
	 	<div>
	 	 	 <p style="white-space: pre-line;">white space refers to any empty space or characters that do not display	
	 	 	 a visible symbol or have any effect on the text's meaning</p>
	 	</div>
	 	<h4>break-spaces</h4>
	 	<div>
	 	 	 <p style="white-space: break-spaces;">white space refers to any empty space or characters that do not display	
	 	 	 a visible symbol or have any effect on the text's meaning</p>
	 	</div>
</body>
</html>