Cách thiết lập số cột một phần tử trải rộng (column-span) với JavaScript

Thuộc tính columnSpan (CSS column-span) cho phép một phần tử con trải rộng qua tất cả các cột của container đa cột. Giá trị duy nhất hỗ trợ là all (trải hết) hoặc none (mặc định).

Ví dụ minh họa

Nhấn nút để tiêu đề <h1> trải rộng 4 cột (không hoạt động trên Firefox):

<!DOCTYPE html>
<html>
<head>
  <style>
    #myID { column-count: 4; }
  </style>
</head>
<body>
  <p>Lưu ý: columnSpan không hoạt động trên Firefox.</p>
  <button onclick="display()">Trải cột</button>
  <div id="myID">
    <h1 id="h1ID">Tiêu đề cấp 1 cho Demo</h1>
    Đâ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. Đâ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. Đâ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. Đâ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.
    Đâ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 display() {
      document.getElementById("h1ID").style.columnSpan = "all";
    }
  </script>
</body>
</html>

Hỗ trợ trình duyệt

• Hỗ trợ: Chrome, Edge, Safari, Opera
• Không hỗ trợ: Firefox (đang xem xét triển khai)
• Giá trị all làm phần tử ngắt luồng cột (break out of column flow).