Ngọc Thanh - 28
- 17/07/2025
Ngọc Thanh Thuộc tính overflow trong CSS là một loại thuộc tính của CSS dùng để cách hiển thị nội dung trong một thẻ HTML, có thể hiện theo cách cuộn trang, 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
Thuộc tính overflow trong CSS là gì?
Thuộc tính overflow trong CSS là một loại thuộc tính của CSS dùng để cách hiển thị nội dung trong một thẻ HTML, có thể hiện theo cách cuộn trang hoặc thẻ html đó bao phủ không cho những gì bên trong nó tràn ra ngoài,....
Các giá trị của Thuộc tính overflow trong CSS
Css overflow hidden
<!DOCTYPE html>
<html>
<head>
<title>Chạy thử Css overflow hidden</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#over-hid{width:100%;float:left;height:auto;overflow:hidden}
</style>
</head>
<body>
<h1>Chạy thử Css overflow hidden</h1>
<div id="over-hid">
<p>Thuộc tính overflow trong CSS là một loại thuộc tính của CSS dùng để cách hiển thị nội dung trong một thẻ HTML, có thể hiện theo cách cuộn trang hoặc thẻ html đó bao phủ không cho những gì bên trong nó tràn ra ngoài,....</p>
<img style="width:100%;float:left;height:auto;margin-bottom:10px" src="https://webmoi.vn/media/images/background-image-full-man-hinh.jpg" >
<img src="https://webmoi.vn/media/images/background-image-full-man-hinh.jpg" >
</div>
</body>
</html>
Ở ví dụ này mình cho hình ảnh chiều rộng theo kích thước của hình nên nó lớn hơn chiều rộng của thẻ div chứa nó, lúc này overflow hidden sẽ không cho hình đó tràn ra ngoài nên sẽ không thấy được phần hình bị tràn.
Css overflow auto
overflow:auto
Giá trị này thường sẽ cố định chiều cao, nếu có thẻ HTML lớn hơn chiều rộng nó sẽ hiện thanh cuộn ngang, nếu nội dung nhiều hơn số chiều cao thì sẽ hiện thanh cuộn dọc.
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 *
