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

คุณสมบัติ column-rule กำหนดเส้นขอบ ระหว่างคอลัมน์ในข้อความหลายคอลัมน์ ค่าที่รับจะเหมือนกับคุณสมบัติ border

ตัวอย่าง . แบบ solid

ในตัวอย่างนี้ ข้อความจะแบ่งออกเป็น 3 คอลัมน์ โดยมีเส้นขอบระหว่างคอลัมน์เป็น เส้นทึบหนา 1px (ระยะห่าง ระหว่างคอลัมน์จะถูกสร้างอัตโนมัติ เนื่องจากตั้งค่า column-gap เป็นค่า normal):

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

css#elem {
  column-rule: 1px solid black;
  column-count: 3;
  column-gap: normal;
  text-align: justify;
}

Результат:

ตัวอย่าง . อิทธิพลของ column-gap

ในตัวอย่างนี้ ข้อความจะแบ่งออกเป็น 3 คอลัมน์ โดยมีช่องว่างระหว่างคอลัมน์ 50px เส้นขอบจะอยู่ตรงกลางของช่องว่าง (ทั้งซ้ายและขวาของเส้นขอบจะห่าง 25px):

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

css#elem {
  column-rule: 1px solid black;
  column-count: 3;
  column-gap: 50px;
  text-align: justify;
}

Результат:

ดูเพิ่มเติม