Khi nội dung phần tử lớn hơn kích thước hộp chứa, nội dung có thể tràn ra ngoài, làm vỡ layout. Thuộc tính overflow xử lý tình huống này.
CSS Overflow Property
overflow chỉ định hành vi khi nội dung không vừa hộp. Chỉ áp dụng cho block-level element có height cố định.
4 giá trị:
- visible (mặc định): Không cắt, nội dung tràn ra ngoài hộp.
- scroll: Cắt nội dung tràn, thêm cả 2 scrollbar ngang và dọc (luôn hiện).
- hidden: Cắt nội dung tràn, ẩn hoàn toàn phần thừa.
- auto: Tự động thêm scrollbar chỉ khi cần (chỉ scrollbar cần thiết).
Ví Dụ Từng Giá Trị
Hộp 200px rộng x 100px cao, nền xám nhạt, text dài.
overflow: visible
div { width: 200px; height: 100px; background: lightgray; overflow: visible; }
Text tràn ra ngoài hộp. Có thể che khuất nội dung khác.
overflow: scroll
div { width: 200px; height: 100px; background: lightgray; overflow: scroll; }
Cả 2 scrollbar hiện, nội dung giữ trong hộp.
overflow: auto
div { width: 200px; height: 100px; background: lightgray; overflow: auto; }
Chỉ hiện scrollbar cần thiết (thường chỉ dọc).
overflow: hidden
div { width: 200px; height: 100px; background: lightgray; overflow: hidden; }
Phần text thừa bị cắt mất, không thấy.
overflow-x Và overflow-y - Kiểm Soát Riêng Trục
overflow-x: Xử lý tràn ngang (trái/phải).
overflow-y: Xử lý tràn dọc (trên/dưới).
div {
overflow-x: hidden; /* không scroll ngang */
overflow-y: scroll; /* luôn scroll dọc */
}
Kết quả: chỉ có scrollbar dọc.
Kết Luận
overflow kiểm soát hiển thị khi nội dung tràn: visible, scroll, hidden, auto. overflow-x/y kiểm soát riêng từng trục. Quan trọng cho layout chắc chắn, tránh vỡ giao diện.