CSS - white-space 属性

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

可能的值

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

应用于

所有块级元素。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

DOM 语法

object.style.whiteSpace = "pre";

示例

这是一个示例

Open Compiler

   <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>

打印页面