Thuộc tính overflow trong CSS
Trần Thị Vân - 1255
- 17/07/2025
Chức năng của Thuộc tính overflow trong CSS
Thuộc tính overflow trong CSS dùng để quy định cách xem nội dung trong phần tử HTML bằng cách cuộn trang hay ẩn bớt, thuộc tính này dùng cho các phần tử HTML có giới hạn chiều rộng và chiều cao, dành cho những nội dung tràn màn hình.
Cú pháp của Thuộc tính overflow trong CSS
overflow: giatri;
giatri: Giá trị để quy định cách xem nội dung trong phần tử HTML (Ví dụ: auto, clip, hidden, overlay,....)
Các giá trị của thuộc tính overflow trong CSS
auto: Hiện thanh cuộn chiều dọc nếu nội dung theo chiều dọc bị tràn, hiện thanh cuộn chiều ngang nếu nội dung theo chiều ngang bị tràn.
clip: Ẩn nội dung bị tràn ra ngoài phần tử HTML.
hidden: Ẩn nội dung bị tràn ra ngoài phần tử HTML.
overlay: Hiện thanh cuộn chiều dọc nếu nội dung theo chiều dọc bị tràn, hiện thanh cuộn chiều ngang nếu nội dung theo chiều ngang bị tràn.
scroll: Hiện thanh cuộn cả chiều ngang lẫn chiều dọc mặc dù chưa có nội dung bị tràn.
visible: Không ẩn nội dung bị tràn lẫn chiều ngang và chiều dọc.
Code Thuộc tính overflow trong CSS
overflow: auto;
overflow: clip;
overflow: hidden;
overflow: overlay;
overflow: scroll;
overflow: visible;
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính overflow trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
div {width:32%; float:left; height:150px; background:#ddd; margin-right:1%; padding:10px; margin-bottom:15px }
</style>
</head>
<body>
<h1>Code Thuộc tính overflow trong CSS</h1>
<p>Dùng để quy định cách xem nội dung trong phần tử HTML bằng cách cuộn trang hay ẩn bớt, thuộc tính này dùng cho các phần tử HTML có giới hạn chiều rộng và chiều cao, dành cho những nội dung tràn màn hình:</p>
<div style="overflow: auto;">
<h4>overflow: auto;</h4>
<p>Thuộc tính overflow trong CSS dùngvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv để quy định cách xem nội dung trong phần tử HTML bằng cách cuộn trang hay ẩn bớt, thuộc tính này dùng cho các phần tử HTML có giới hạn chiều rộng và chiều cao, dành cho những nội dung tràn màn hình.</p>
</div>
<div style="overflow: clip;">
<h4>overflow: clip;</h4>
<p>Thuộc tính overflow trong CSS dùngvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv để quy định cách xem nội dung trong phần tử HTML bằng cách cuộn trang hay ẩn bớt, thuộc tính này dùng cho các phần tử HTML có giới hạn chiều rộng và chiều cao, dành cho những nội dung tràn màn hình.</p>
</div>
<div style="overflow: hidden;">
<h4>overflow: hidden;</h4>
<p>Thuộc tính overflow trong CSS dùngvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv để quy định cách xem nội dung trong phần tử HTML bằng cách cuộn trang hay ẩn bớt, thuộc tính này dùng cho các phần tử HTML có giới hạn chiều rộng và chiều cao, dành cho những nội dung tràn màn hình.</p>
</div>
<div style="overflow: overlay;">
<h4>overflow: overlay;</h4>
<p>Thuộc tính overflow trong CSS dùngvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv để quy định cách xem nội dung trong phần tử HTML bằng cách cuộn trang hay ẩn bớt, thuộc tính này dùng cho các phần tử HTML có giới hạn chiều rộng và chiều cao, dành cho những nội dung tràn màn hình.</p>
</div>
<div style="overflow: scroll;">
<h4>overflow: scroll;</h4>
<p>Thuộc tính overflowwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww trong CSS dùng để quy định cách xem nội dung trong phần tử HTML bằng cách cuộn trang hay ẩn bớt, thuộc tính này dùng cho các phần tử HTML có giới hạn chiều rộng và chiều cao, dành cho những nội dung tràn màn hình.</p>
</div>
<div style="overflow: visible;">
<h4>overflow: visible;</h4>
<p>Thuộc tính overflow trong CSS dùngvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv để quy định cách xem nội dung trong phần tử HTML bằng cách cuộn trang hay ẩn bớt, thuộc tính này dùng cho các phần tử HTML có giới hạn chiều rộng và chiều cao, dành cho những nội dung tràn màn hình.</p>
</div>
</body>
</html>
Ứng dụng thuộc tính overflow trong CSS thực tế
Trong thiết kế giao diện, overflow thường được dùng khi nội dung bên trong một phần tử lớn hơn kích thước vùng hiển thị. Thay vì để phần nội dung tràn ra ngoài gây phá vỡ bố cục, bạn có thể kiểm soát cách hiển thị bằng thuộc tính này.
Tạo vùng nội dung có thanh cuộn
Khi một khu vực chứa nhiều nội dung nhưng không muốn làm tăng chiều cao của trang, có thể giới hạn kích thước và cho phép người dùng cuộn bên trong khu vực đó. Cách này phù hợp với danh sách dài, bảng dữ liệu hoặc khung hiển thị mã nguồn.
.content-box {
width: 100%;
height: 300px;
overflow: auto;
}
Giá trị auto giúp trình duyệt tự quyết định có cần hiển thị thanh cuộn hay không dựa trên lượng nội dung thực tế. Đây thường là lựa chọn linh hoạt hơn việc luôn hiển thị thanh cuộn.
Ẩn nội dung vượt khỏi khung hiển thị
Trong một số thành phần giao diện, phần nội dung vượt ra ngoài kích thước quy định không nên xuất hiện. Khi đó, overflow: hidden có thể giới hạn nội dung trong phạm vi của phần tử.
.box {
width: 300px;
height: 180px;
overflow: hidden;
}
Cách này hữu ích khi tạo khung ảnh, thẻ nội dung hoặc các thành phần có hiệu ứng chuyển động. Tuy nhiên, nếu phần bị ẩn chứa thông tin quan trọng, người dùng có thể không tiếp cận được nội dung đó.
Xử lý nội dung tràn trên thiết bị di động
Màn hình điện thoại có chiều rộng hạn chế nên những nội dung cố định kích thước lớn, chẳng hạn bảng hoặc đoạn mã dài, rất dễ làm trang bị tràn ngang. Thay vì để toàn bộ trang xuất hiện thanh cuộn ngang, có thể tạo vùng cuộn riêng cho thành phần cần hiển thị.
.table-wrapper {
width: 100%;
overflow-x: auto;
}
Cách triển khai này giúp nội dung lớn vẫn có thể xem đầy đủ mà không làm thay đổi chiều rộng của bố cục chính. Đặc biệt, nó phù hợp với các bảng có nhiều cột hoặc đoạn mã cần giữ nguyên một dòng.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính overflow trong CSS.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
