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

คุณสมบัติ column-count กำหนดจำนวนคอลัมน์ ที่แนะนำ ในข้อความหลายคอลัมน์ จำนวนจริงของคอลัมน์อาจแตกต่างจาก ที่กำหนดไว้ ขึ้นอยู่กับความกว้างของคอลัมน์ และขนาดของช่องว่างระหว่างคอลัมน์

ไวยากรณ์

cssselector {
  column-count: number | auto;
}

ค่า

ค่าเริ่มต้น: auto

ตัวอย่าง

ในตัวอย่างนี้ข้อความจะถูกแบ่งออกเป็น 3 คอลัมน์ (แน่นอนว่าในเบราว์เซอร์ที่ รองรับคุณสมบัติหลายคอลัมน์ ส่วนในเบราว์เซอร์อื่นๆ จะแสดงผลเป็นข้อความธรรมดาในคอลัมน์เดียว):

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

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

Результат:

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

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

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

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

Результат:

ดูเพิ่มเติม