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

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

ไวยากรณ์

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

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

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

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

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

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

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

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

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

ดูเพิ่มเติม

คุณสมบัติ column-count,
ซึ่งกำหนดจำนวนคอลัมน์
คุณสมบัติ column-gap,
ซึ่งกำหนดระยะห่างระหว่างคอลัมน์
คุณสมบัติ column-rule,
ซึ่งกำหนดเส้นขอบระหว่างคอลัมน์
คุณสมบัติ column-span,
ซึ่งกำหนดจำนวนคอลัมน์ที่องค์ประกอบควรขยายไปครอบคลุม
คุณสมบัติ columns,
ซึ่งเป็นคุณสมบัติแบบย่อสำหรับการกำหนดหลายคอลัมน์