คุณสมบัติ columnSpan ของ HTML DOM Style: การข้ามคอลัมน์

คุณสมบัติ columnSpan ใช้ระบุว่าองค์ประกอบควรข้ามคอลัมน์กี่คอลัมน์ใน CSS Multi-column Layout

ไวยากรณ์ (Syntax)

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

ค่าที่รองรับ

ตัวอย่างการใช้งาน

<!DOCTYPE html>
<html>
<head>
<style>
  #DIV1 {
    column-count: 3;
    background-color: papayawhip;
    padding: 20px;
  }
  #P1 {
    background-color: lightcyan;
    font-size: 1.4em;
    padding: 10px;
    margin: 10px 0;
  }
</style>
<script>
  function changeColumnSpan() {
    document.getElementById("P1").style.columnSpan = "all";
    document.getElementById("Sample").innerHTML = "Column span ตั้งเป็น all แล้ว (ข้ามทุกคอลัมน์)";
  }
</script>
</head>
<body>
<div id="DIV1">
  <p id="P1">นี่คือหัวข้อบทความที่ข้ามคอลัมน์</p>
  นี่คือข้อความสุ่มใน div จะกลายเป็นบ้าบอๆ ไปเร็วๆ นี้ adkasfdlajfkfask
  ข้อความกลับมาปกติแล้ว
</div>
<p>คลิกปุ่มเพื่อเปลี่ยน column span ของ div ด้านบน</p>
<button onclick="changeColumnSpan()">เปลี่ยน Column Span</button>
<p id="Sample"></p>
</body>
</html>

ผลลัพธ์

ก่อน: หัวข้ออยู่ในคอลัมน์แรก ข้อความไหล 3 คอลัมน์
หลัง: หัวข้อกว้างเต็ม 3 คอลัมน์ (span all) ข้อความไหลใต้หัวข้อ

การทำงานของ column-span: all

┌─────────────────────────────────────────┐
│         HEADLINE (span: all)            │  ← ข้ามทั้ง 3 คอลัมน์
├─────────┬─────────┬─────────┤
│ Col 1   │ Col 2   │ Col 3   │  ← เนื้อหาไหลต่อใต้หัวข้อ
│         │         │         │
└─────────┴─────────┴─────────┘

เงื่อนไขการทำงาน

• พาเรนต์ต้องมี column-count > 1 หรือ column-width
• องค์ประกอบต้องเป็น Block-level (div, h1-h6, p, table ฯลฯ)
• ไม่ทำงานกับ Inline elements (span, a, strong ฯลฯ)
• ไม่สืบทอด (non-inherited)

คุณสมบัติ Multi-column ที่เกี่ยวข้อง

การใช้งานจริง

• หัวข้อบทความในหน้าหนังสือพิมพ์ (Newspaper headline)
• รูปภาพ/ตารางที่กว้างเต็มหน้าใน Layout หลายคอลัมน์
• Pull quotes, Blockquotes ที่เน้นเด่น

การรองรับเบราว์เซอร์

รองรับ Chrome 50+, Firefox 52+, Safari 10+, Edge 12+ (ไม่รองรับ IE)