Thuộc tính CSS điều khiển hành vi khi nội dung lớn hơn hộp chứa

CSS cung cấp thuộc tính overflow để chỉ định trình duyệt xử lý như thế nào khi nội dung của hộp lớn hơn chính hộp đó. Thuộc tính này chấp nhận các giá trị sau:

Giá trị	Mô tả
visible	Cho phép nội dung tràn ra ngoài viền của phần tử chứa.
hidden	Nội dung bị cắt ở viền phần tử chứa, không hiển thị thanh cuộn.
scroll	Kích thước phần tử không đổi, nhưng thêm thanh cuộn để người dùng cuộn xem nội dung.
auto	Tương tự scroll, nhưng thanh cuộn chỉ hiện khi nội dung thực sự tràn.

Ví dụ

Thử chạy mã sau để triển khai thuộc tính overflow:

<html>
<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>
</head>
<body>
  <p>Ví dụ giá trị scroll:</p>
  <div class="scroll">
    Tôi sẽ đặt nhiều nội dung ở đây để chỉ cách thanh cuộn hoạt động khi có tràn trong hộp phần tử.
    Điều này cung cấp thanh cuộn ngang cũng như dọc.
  </div>
  <br />
  <p>Ví dụ giá trị auto:</p>
  <div class="auto">
    Tôi sẽ đặt nhiều nội dung ở đây để chỉ cách thanh cuộn hoạt động khi có tràn trong hộp phần tử.
    Điều này cung cấp thanh cuộn ngang cũng như dọc.
  </div>
</body>
</html>