Cách xử lý tab, xuống dòng, khoảng trắng (whiteSpace) bằng JavaScript

Thuộc tính whiteSpace kiểm soát cách trình duyệt xử lý khoảng trắng, tab, và xuống dòng trong mã nguồn HTML. Giá trị chính: normal, nowrap, pre, pre-wrap, pre-line, break-spaces.

Ví dụ minh họa

Mã sau đặt whiteSpace: pre cho div (giữ nguyên tab, khoảng trắng, xuống dòng như thẻ <pre>) khi nhấn nút:

<!DOCTYPE html>
<html>
<head>
  <style>
    #box {
      width: 300px;
      height: 100px;
      border: 2px solid black;
      background-color: gray;
      color: white;
      padding: 10px;
    }
  </style>
</head>
<body>
  <button onclick="setWhiteSpace()">Đặt white-space = pre</button>
  <div id="box">
    Đây là Văn bản Demo.     Đây là Văn bản Demo.
    Đây là Văn bản Demo.     Đây là Văn bản Demo.
    Đây là Văn bản Demo.
  </div>
  <script>
    function setWhiteSpace() {
      document.getElementById("box").style.whiteSpace = "pre";
      /* Giữ nguyên tất cả khoảng trắng, tab, xuống dòng như trong HTML */
    }
  </script>
</body>
</html>

Bảng so sánh các giá trị whiteSpace

Giá trị	Khoảng trắng liên tiếp	Tab	Xuống dòng trong mã	Tự động wrap
`normal`	Gộp thành 1 space	Biến thành space	Bỏ qua	Có
`nowrap`	Gộp thành 1 space	Biến thành space	Bỏ qua	Không (tràn ra ngoài)
`pre`	Giữ nguyên	Giữ nguyên	Giữ nguyên	Không
`pre-wrap`	Giữ nguyên	Giữ nguyên	Giữ nguyên	Có
`pre-line`	Gộp thành 1 space	Biến thành space	Giữ nguyên	Có
`break-spaces`	Giữ nguyên (có thể break ở space)	Giữ nguyên	Giữ nguyên	Có

Ứng dụng thực tế:

pre / pre-wrap: Hiển thị code, log, văn bản định dạng sẵn.
nowrap: Nút bấm, label đơn dòng, ellipsis (kết hợp overflow: hidden; text-overflow: ellipsis).
pre-line: Văn bản có xuống dòng ý nghĩa (thơ, địa chỉ) nhưng vẫn gộp space dư.