Bố cục CSS - Tràn

Thuộc overflow CSS kiểm soát những gì xảy ra với nội dung quá lớn để vừa với một khu vực.

Tràn CSS

Thuộc tính overflow chỉ định cắt nội dung hay thêm thanh cuộn khi nội dung của một phần tử quá lớn để vừa với khu vực được chỉ định.

Thuộc tính overflow có các giá trị sau:

• visible - Mặc định. Phần tràn không bị cắt bớt. Nội dung hiển thị bên ngoài hộp của phần tử
• hidden - Phần tràn bị cắt bớt và phần nội dung còn lại sẽ ẩn
• scroll - Phần tràn được cắt bớt và thanh cuộn được thêm vào để xem phần còn lại của nội dung
• auto - Tương tự như scroll , nhưng nó chỉ thêm thanh cuộn khi cần thiết

tràn: hiển thị

Theo mặc định, phần tràn visible , nghĩa là nó không bị cắt bớt và nó hiển thị bên ngoài hộp của phần tử:

tràn: ẩn

Với giá trị hidden , phần tràn bị cắt bớt và phần nội dung còn lại bị ẩn:

tràn: cuộn

Đặt giá trị thành scroll , phần tràn sẽ bị cắt bớt và thanh cuộn được thêm vào để cuộn bên trong hộp. Lưu ý rằng thao tác này sẽ thêm thanh cuộn theo cả chiều ngang và chiều dọc (ngay cả khi bạn không cần đến nó):

tràn: tự động

Giá trị auto tương tự như scroll nhưng nó chỉ thêm thanh cuộn khi cần thiết:

tràn-x và tràn-y

Các thuộc tính overflow-x và overflow-y chỉ định xem thay đổi tràn nội dung theo chiều ngang hay chiều dọc (hoặc cả hai):

overflow-x chỉ định những việc cần làm với cạnh trái/phải của nội dung.
overflow-y chỉ định những việc cần làm với cạnh trên/dưới của nội dung.

<phong cách>
.intro {
  chiều rộng: 200px;
  chiều cao: 70px;
  : ;
}
</style>

<cơ thể>

<div class="giới thiệu">
Lorem ipsum dolor ngồi amet,
 consectetur adipiscing tinh hoa.
 Phasellus imperdiet, nulla et dictum interdum,
 nisi lorem egestas odio,
 vitae scelerisque enim ligula venenatis dolor.
</div>

</body>

Tất cả thuộc tính tràn CSS