CSS overflow kiểm soát nội dung lớn. Nó chỉ định có nên cắt nội dung hoặc thêm thanh cuộn hay không.
Syntax:
overflow: visible | hidden | scroll | auto;
Property Values:
Thuộc tính overflow chứa các giá trị sau:
- visible: Nội dung không bị cắt và hiển thị bên ngoài hộp phần tử.
- hidden: Phần nội dung tràn sẽ bị cắt và phần còn lại sẽ không hiển thị.
- scroll: Nội dung tràn bị cắt nhưng thanh cuộn được thêm vào để xem phần còn lại. Thanh cuộn có thể là ngang hoặc dọc.
- auto: Tự động thêm thanh cuộn khi cần thiết.
overflow-x and overflow-y:Thuộc tính này chỉ định cách thay đổi overflow của các phần tử. x xử lý các cạnh ngang và y xử lý các cạnh dọc.
CSS Overflow Examples
Example 1:Trong ví dụ này, chúng ta đang sử dụng thuộc tính overflow: visible;.
html<!DOCTYPE>
<html>
<head>
<style>
p {
width: 100px;
height: 80px;
border: 1px solid;
overflow: visible;
}
</style>
</head>
<body>
<h2>
GEEKSFORGEEKS
</h2>
<p>
The CSS overflow controls big content.
It tells whether to clip content or to
add scroll bars.
</p>
</body>
</html>
Output:
Example 2:Trong ví dụ này, chúng ta đang sử dụng thuộc tính overflow: scroll;.
html<!DOCTYPE>
<html>
<head>
<style>
p {
width: 120px;
height: 100px;
border: 1px solid;
overflow: scroll;
}
</style>
</head>
<body>
<h2>
GEEKSFORGEEKS
</h2>
<p>
The CSS overflow controls big content.
It tells whether to clip content or
to add scroll bars.
</p>
</body>
</html>
Output:
Example 3:Trong ví dụ này, chúng ta đang sử dụng thuộc tính overflow: auto;.
html<!DOCTYPE>
<html>
<head>
<style>
p {
width: 120px;
height: 100px;
border: 1px solid;
overflow: auto;
}
</style>
</head>
<body>
<h2>
GEEKSFORGEEKS
</h2>
<p>
The CSS overflow controls big content.
It tells whether to clip content or
to add scroll bars.
</p>
</body>
</html>
Output:
Supported Browser:
- Google Chrome 1
- Edge 12
- Firefox 1
- Opera 7
- Safari 1