วิธีตั้งค่าให้องค์ประกอบขยายครอบคลุมคอลัมน์ทั้งหมดด้วย JavaScript (columnSpan)

ใช้คุณสมบัติ columnSpan เพื่อให้องค์ประกอบ (เช่น heading) ขยายครอบคลุมคอลัมน์ทั้งหมด ตั้งค่าเป็น "all" หมายเหตุ: ไม่รองรับใน Firefox

ตัวอย่าง

<!DOCTYPE html>
<html>
  <head>
    <style>
      #myID { column-count: 4; }
    </style>
  </head>
  <body>
    <p>Note- The columnSpan property won't work in Firefox.</p>
    <button onclick="display()">Span Columns</button>
    <div id="myID">
      <h1 id="h1ID">Heading Level 1 for Demo</h1>
      This is Demo Text. This is Demo Text. This is Demo Text. This is Demo Text.
      This is Demo Text. This is Demo Text. This is Demo Text. This is Demo Text.
      This is Demo Text. This is Demo Text. This is Demo Text. This is Demo Text.
      This is Demo Text. This is Demo Text. This is Demo Text. This is Demo Text.
      This is Demo Text. This is Demo Text. This is Demo Text. This is Demo Text.
      This is Demo Text. This is Demo Text. This is Demo Text. This is Demo Text.
    </div>
    <script>
      function display() {
        document.getElementById("h1ID").style.columnSpan = "all";
      }
    </script>
  </body>
</html>