Thuộc tính whiteSpace của HTML DOM Style

Thuộc tính whiteSpace điều khiển cách trình duyệt xử lý khoảng trắng, tab, xuống dòng trong văn bản.

Cú pháp

object.style.whiteSpace = "value"

Giá trị

Giá trị	Mô tả
initial	Mặc định.
inherit	Kế thừa.
normal	Gộp khoảng trắng liên tiếp thành một, tự động xuống dòng.
nowrap	Gộp khoảng trắng, không xuống dòng tự động.
pre	Giữ nguyên khoảng trắng, chỉ xuống dòng khi gặp `\n`.
pre-line	Gộp khoảng trắng, xuống dòng khi cần hoặc gặp `\n`.
pre-wrap	Giữ nguyên khoảng trắng, xuống dòng khi cần hoặc gặp `\n`.

Ví dụ: Thay đổi whiteSpace thành pre-line

<!DOCTYPE html>
<html>
<head>
  <style>
    p { border: 2px solid #fff; }
    .btn { background: #db133a; color: #fff; border: none; padding: 0.5rem 1rem; cursor: pointer; }
  </style>
</head>
<body>
  <h1>DOM Style whiteSpace Property</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>

Ban đầu văn bản gộp khoảng trắng, sau khi click nút, các xuống dòng trong code HTML được giữ lại.