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;">空白是指任何空白区域或不显示的字符
       可见符号或对文本含义有任何影响
      </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>