CSS cung cấp một thuộc tính có tên là tràn điều này cho trình duyệt biết phải làm gì nếu nội dung của hộp lớn hơn chính hộp đó. Thuộc tính này có thể nhận một trong các giá trị sau -
| Giá trị | Mô tả |
|---|---|
| hiển thị | Cho phép nội dung tràn ra ngoài đường viền của phần tử chứa nó. |
| ẩn | Nội dung của phần tử lồng nhau chỉ đơn giản bị cắt ở đường viền của phần tử chứa và không có thanh cuộn nào được hiển thị. |
| cuộn | Kích thước của phần tử chứa không thay đổi, nhưng các thanh cuộn được thêm vào để cho phép người dùng cuộn để xem nội dung. |
| tự động | Mục đích giống như một cuộn, nhưng thanh cuộn sẽ chỉ được hiển thị nếu nội dung bị tràn. |
Ví dụ
Bạn có thể thử chạy mã sau để triển khai tràn tài sản -
<html>
<head>
</head>
<style>
.scroll{
display:block;
border: 2px solid green;
padding:10px;
margin-top:10px;
width:300px;
height:50px;
overflow:scroll;
}
.auto{
display:block;
border: 2px solid green;
padding:10px;
margin-top:10px;
width:300px;
height:50px;
overflow:auto;
}
</style>
<body>
<p>Example of scroll value:</p>
<div class = "scroll">
I am going to keep lot of content here just to show you how
scrollbars works if there is an overflow in an element box.
This provides your horizontal as well as vertical scrollbars.
</div>
<br />
<p>Example of auto value:</p>
<div class = "auto">
I am going to keep lot of content here just to show you how scrollbars
works if there is an overflow in an element box. This provides your
horizontal as well as vertical scrollbars.
</div>
</body>
</html>