Thuộc tính column-span

Thuộc tính column-span xác định số lượng cột mà phần tử sẽ kéo dài qua trong văn bản nhiều cột. Thuộc tính nhận giá trị là một số 1, hoặc từ khóa all. Với giá trị 1 phần tử sẽ chỉ bao phủ một cột, còn với giá trị all - tất cả các cột.

Cú pháp

bộ chọn {
	column-span: 1 | all;
}

Giá trị mặc định: 1.

Ví dụ

Trong ví dụ này tiêu đề sẽ nằm bên trong cột đầu tiên:

<div id="elem">
	<h2>Lorem ipsum dolor sit amet eu metus non</h2>
	some long text
</div>

#elem h2 {
	column-span: 1;
	margin: 0;
}
#elem {
	column-count: 3;
	text-align: justify;
}

Ví dụ

Và bây giờ tiêu đề sẽ kéo dài qua tất cả các cột:

<div id="elem">
	<h2>Lorem ipsum dolor sit amet eu metus non</h2>
	some long text
</div>

#elem h2 {
	column-span: all;
	margin: 0;
}
#elem {
	column-count: 3;
	text-align: justify;
}

Xem thêm

thuộc tính column-count,
xác định số lượng cột
thuộc tính column-width,
xác định chiều rộng cột
thuộc tính column-gap,
xác định khoảng cách giữa các cột
thuộc tính column-rule,
xác định đường viền giữa các cột
thuộc tính columns,
là thuộc tính viết tắt cho bố cục nhiều cột