Thuộc tính overflow

Thuộc tính overflow chỉ định cho trình duyệt, cách xử lý nội dung (văn bản, hình ảnh, các khối khác), tràn ra ngoài ranh giới của khối (vượt quá chiều rộng hoặc chiều cao của nó). Trình duyệt có thể ẩn phần tràn ra, thêm thanh cuộn hoặc không làm gì cả (giữ nguyên như vậy - tràn ra ngoài ranh giới).

Cú pháp

bộ chọn {
	overflow: hidden | scroll | auto | visible;
}

Giá trị

Giá trị	Mô tả
`hidden`	Ẩn phần nội dung tràn ra ngoài ranh giới khối.
`scroll`	Thêm thanh cuộn, và luôn luôn như vậy, ngay cả khi không có gì tràn ra (trong trường hợp này chúng sẽ không hoạt động).
`auto`	Thêm thanh cuộn khi cần thiết: nếu nội dung không vừa - chúng sẽ xuất hiện, nếu tất cả vừa - sẽ không có chúng.
`visible`	Không ẩn phần nội dung tràn ra ngoài ranh giới khối.

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

Ví dụ . Giá trị visible

Trong ví dụ này, một từ rất dài sẽ không vừa với vùng chứa và sẽ tràn ra ngoài ranh giới của nó. Việc cắt không xảy ra:

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

#elem {
	overflow: visible;
	border: 1px solid red;
	width: 200px;
}

Ví dụ . Giá trị visible

Bây giờ không chỉ chiều rộng bị giới hạn, mà cả chiều cao cũng vậy (văn bản sẽ tràn ra ngoài khối cả về chiều cao):

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

#elem {
	width: 200px;
	height: 40px;
	overflow: visible;
	border: 1px solid red;
	margin-bottom: 20px;
}

Ví dụ . Giá trị hidden

Bây giờ tất cả những gì tràn ra ngoài ranh giới vùng chứa sẽ bị cắt bỏ (cả về chiều cao nữa). Hãy chú ý đến việc cắt theo chiều cao chỉ xảy ra khi nó được đặt rõ ràng. Ngược lại, văn bản sẽ mở rộng vùng chứa theo chiều cao - và sẽ không có bất kỳ sự cắt nào:

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

#elem {
	overflow: hidden;
	width: 200px;
	height: 40px;
	border: 1px solid red;
}

Ví dụ . Giá trị scroll

Với giá trị scroll, thanh cuộn sẽ luôn có, ngay cả khi không có gì tràn ra (trong trường hợp này chúng sẽ không hoạt động). Bây giờ văn bản không tràn ra theo chiều rộng, cũng không theo chiều cao, nhưng thanh cuộn vẫn có (không hoạt động):

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

#elem {
	overflow: scroll;
	width: 400px;
	height: 100px;
	border: 1px solid red;
}

Ví dụ . Giá trị auto

Với giá trị auto, thanh cuộn chỉ được thêm vào nếu nội dung tràn ra ngoài vùng chứa. Bây giờ không có chúng, vì tất cả đều vừa:

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

#elem {
	overflow: auto;
	width: 400px;
	height: 100px;
	border: 1px solid red;
}

Ví dụ . Giá trị auto

Bây giờ hãy giới hạn chiều rộng - thanh cuộn ngang sẽ xuất hiện:

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

#elem {
	width: 200px;
	overflow: auto;
	height: 100px;
	border: 1px solid red;
}

Xem thêm

thuộc tính word-break,
ngắt các chữ cái của từ dài sang dòng mới
thuộc tính overflow-wrap,
ngắt các chữ cái của từ dài sang dòng mới
thuộc tính overflow-x,
cắt các phần tràn ra theo chiều ngang
thuộc tính overflow-y,
cắt các phần tràn ra theo chiều dọc