คุณสมบัติ column-width

คุณสมบัติ column-width กำหนดความกว้าง ของคอลัมน์ในข้อความหลายคอลัมน์ ค่าของคุณสมบัติ สามารถเป็น หน่วยสำหรับขนาด ใด ๆ ได้ ยกเว้นเปอร์เซ็นต์ หรือคำสำคัญ auto (ค่าเริ่มต้น) เมื่อกำหนดค่า auto เบราว์เซอร์จะกำหนดความกว้าง ที่เหมาะสมของคอลัมน์โดยอัตโนมัติตาม column-count และ column-gap

ไวยากรณ์

cssเซเลกเตอร์ {
  column-width: ค่า;
}

ตัวอย่าง . กำหนดความกว้าง

ในตัวอย่างนี้กำหนดความกว้างของคอลัมน์ column-width เป็น 150px ในขณะที่จำนวนของคอลัมน์ column-count ถูกตั้งค่าเป็น auto ผลลัพธ์คือ ความกว้างของคอลัมน์จะเป็น 150px ส่วนจำนวน และระยะห่างระหว่างคอลัมน์ เบราว์เซอร์จะเป็นผู้กำหนดเอง:

html<div id="elem">
  some long text
</div>

css#elem {
  column-count: auto;
  column-width: 150px;
  text-align: justify;
}

Результат:

ตัวอย่าง . ค่า auto

ในตัวอย่างนี้ ข้อความจะถูกแบ่งออกเป็น 3 คอลัมน์ (เนื่องจาก column-width ถูกตั้งค่า เป็น 3) แต่ความกว้างของคอลัมน์จะถูกคำนวณ โดยอัตโนมัติ:

html<div id="elem">
  some long text
</div>

css#elem {
  column-width: auto;
  column-count: 3;
  text-align: justify;
}

Результат:

ดูเพิ่มเติม