HTML DOM Style whiteSpace 属性

htmlweb developmentfront end technology更新于 2025/6/11 7:40:17

HTML DOM Style whiteSpace 属性返回并修改 HTML 文档中元素文本中制表符、换行符和空格的处理方式。

语法

以下是语法 −

返回 whiteSpace

object.style.whiteSpace

修改 whiteSpace

object.style.whiteSpace = “value”

值

此处，值可以为 -

值	说明
initial	将此属性值设置为其默认值。
inherit	从其父元素继承此属性值。
normal	在这种情况下，空格序列将折叠为一个，并且文本将在必要时换行。
nowrap	在这种情况下，空格序列将折叠为一个，并且文本不会换行到下一行。
pre	在这种情况下，浏览器会保留空格，并且文本仅在遇到换行符时才会换行。
pre-line	在这种情况下，序列的空白将合并为一个，文本仅在必要时换行。
pre-wrap	其中的空白由浏览器保留，文本仅在必要时换行。

示例

让我们看一个 HTML DOM Style whiteSpace 属性的示例 −

<!DOCTYPE html>
<html>
<head>
<style>
   body {
      color: #000;
      background: lightblue;
      height: 100vh;
   }
   p {
      border: 2px solid #fff;
   }
   .btn {
      background: #db133a;
      border: none;
      height: 2rem;
      border-radius: 2px;
      width: 40%;
      display: block;
      color: #fff;
      outline: none;
      cursor: pointer;
      margin: 1rem 0;
}
</style>
</head>
<body>
<h1>DOM Style whiteSpace Property Example</h1>
<p>
   I'm paragraph element with some dummy text. I'm paragraph element with some dummy text.
   I'm paragraph element with some dummy text. I'm paragraph element with some dummy text.
   I'm paragraph element with some dummy text.
</p>
<button onclick="add()" class="btn">Change whiteSpace</button>
<script>
   function add() {
      document.querySelector('p').style.whiteSpace = "pre-line";
   }
</script>
</body>
</html>