คุณสมบัติ column-rule-width ใน CSS

column-rule-width คืออะไร?

คุณสมบัติ column-rule-width กำหนด ความหนาของเส้นแบ่ง ระหว่างคอลัมน์ใน Multi-column Layout ทำงานร่วมกับ column-rule-style และ column-rule-color

ค่าที่ใช้ได้

• Keyword: thin, medium (default), thick
• Length: px, em, rem, pt (เช่น 1px, 2px, 0.1em)
• ไม่รองรับค่าลบ

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

<!DOCTYPE html>
<html>
<head>
  <style>
    .demo {
      column-count: 4;
      column-gap: 50px;
      column-rule-color: maroon;
      column-rule-style: dashed;
      column-rule-width: 5px;      /* เส้นแบ่งหนา 5px */
    }
  </style>
</head>
<body>
  <div class="demo">
    นี่คือข้อความตัวอย่างสำหรับทดสอบ column-rule-width
    เส้นแบ่งระหว่างคอลัมน์จะเป็นสี maroon แบบ dashed ความหนา 5px
    ข้อความจะไหลต่อเนื่องจากคอลัมน์หนึ่งไปอีกคอลัมน์หนึ่ง
    คุณสมบัติ column-rule-width ควบคุมความหนาของเส้นแบ่งนี้
  </div>
</body>
</html>

Shorthand: column-rule

.demo {
  /* รวม color + style + width ในบรรทัดเดียว */
  column-rule: 5px dashed maroon;
  /* เทียบเท่า:
  column-rule-width: 5px;
  column-rule-style: dashed;
  column-rule-color: maroon; */
}

การใช้งานร่วมกับคุณสมบัติ Columns อื่นๆ

.multi-col {
  columns: 200px 3;              /* shorthand: width + count */
  column-gap: 40px;              /* ระยะห่างคอลัมน์ */
  column-rule: 2px solid #ddd;   /* เส้นแบ่ง: 2px solid gray */
  /* เทียบเท่า:
  column-rule-width: 2px;
  column-rule-style: solid;
  column-rule-color: #ddd; */
}

คำแนะนำ

• ใช้ shorthand column-rule เพื่อเขียนโค้ดสั้นลง
• ค่าเริ่มต้นคือ medium (ประมาณ 3px) ถ้าไม่ระบุ width แต่มี style และ color
• ถ้า column-rule-style เป็น none (default) width จะถูกข้าม (เส้นไม่แสดง)
• ควรระบุ column-gap ให้เพียงพอ ไม่งั้นเส้นแบ่งจะชิดข้อความเกินไป