Thuộc tính column-rule

Thuộc tính column-rule thiết lập đường viền giữa các cột trong văn bản nhiều cột. Về các giá trị được chấp nhận, nó trùng khớp với thuộc tính border.

Ví dụ . Kiểu solid

Trong ví dụ này, văn bản sẽ được chia thành 3 cột với đường viền giữa các cột dưới dạng đường liền nét dày 1px (khoảng cách giữa các cột sẽ được tạo tự động, vì column-gap được đặt ở giá trị normal):

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

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

Ví dụ . Ảnh hưởng của column-gap

Trong ví dụ này, văn bản sẽ được chia thành 3 cột với khoảng cách giữa chúng là 50px. Đường viền khi đó sẽ đi qua giữa khoảng cách (bên phải và bên trái đường viền sẽ có 25px mỗi bên):

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

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

Xem thêm

thuộc tính column-width,
thiết lập chiều rộng của cột
thuộc tính column-count,
thiết lập số lượng cột
thuộc tính column-gap,
thiết lập khoảng cách giữa các cột
thuộc tính column-span,
thiết lập số cột mà phần tử nên kéo dài qua
thuộc tính columns,
là thuộc tính viết tắt cho bố cục nhiều cột