Trần Ngọc Thanh - 339
- 17/07/2025
Trần Ngọc Thanh 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, chi tiết như nào hãy cùng chúng tôi phân tích:
Thuộc tính overflow trong CSS
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á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
<!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>
<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>
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 *
