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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。