Thuộc tính columnSpan trong HTML DOM Style

Thuộc tính columnSpan dùng để chỉ định một phần tử trải rộng (span) qua bao nhiêu cột trong bố cục đa cột (multi-column layout).

Cú pháp

object.style.columnSpan = "1|all|initial|inherit"

Giá trị tham số

Giá trị	Mô tả
1	Phần tử chỉ chiếm 1 cột (mặc định)
all	Phần tử trải rộng qua tất cả các cột
initial	Giá trị mặc định
inherit	Kế thừa từ phần tử cha

Ví dụ minh họa

<!DOCTYPE html>
<html>
<head>
<style>
  #DIV1 {
    column-count: 3;
    background-color: papayawhip;
  }
  #P1 {
    background-color: lightcyan;
    font-size: 1.4em;
  }
</style>
<script>
  function changeColumnSpan() {
    document.getElementById("P1").style.columnSpan = "all";
    document.getElementById("Sample").innerHTML = "Column span đã được đặt thành all";
  }
</script>
</head>
<body>
<div id="DIV1">
  <p id="P1">Đây là tiêu đề đoạn văn mẫu</p>
  Đây là văn bản ngẫu nhiên bên trong div. Sắp thành bựt bội... Văn bản đã bình thường lại.
</div>
<p>Thay đổi column span của div trên bằng cách nhấn nút dưới đây</p>
<button onclick="changeColumnSpan()">Thay đổi Column Span</button>
<p id="Sample"></p>
</body>
</html>

Kết quả

Ban đầu tiêu đề P1 nằm trong cột 1 của 3 cột. Sau khi nhấn "Thay đổi Column Span", P1 trải rộng ngang 3 cột (all), văn bản dưới chia 3 cột bình thường.

Ứng dụng: Tiêu đề bài báo, heading trải ngang toàn bộ layout đa cột như báo chí.