HTML DOM Style whiteSpace属性用法及代码示例

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

用法

以下是语法 -

返回空格

object.style.whiteSpace

修改空格

object.style.whiteSpace = “value”

值

在这里，价值可以是 -

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

示例

让我们看一个 HTML DOM 样式 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>

输出

这将产生以下输出 -

点击 ”Change whiteSpace” 按钮来改变如何处理段落元素的空格的行为 -

相关用法

注：本文由纯净天空筛选整理自AmitDiwan大神的英文原创作品 HTML DOM Style whiteSpace Property。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。