CSS - white-space 属性



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

可能的值

  • normal: 默认值,其中空白符序列会被折叠,当文本到达可用宽度时会换行。

  • nowrap: 空白符会被折叠,文本不会换行。它会继续在同一行,溢出可用宽度。

  • pre: 完全保留 HTML 代码中的空白符。换行符和多个空白符会按原样显示。

  • pre-wrap: 保留 HTML 代码中的换行符和空白符。

  • pre-line: 折叠空白符,但保留换行符。当文本到达可用宽度时会换行。

  • break-spaces: 折叠空白符序列,但保留换行符和换行机会。这是一个实验性值,可能并非所有浏览器都支持。

  • initial: 将值设置为其默认值,即 normal。

  • 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> 
广告