Bài 21:Thuộc tính Overflow trong CSS

Trong css thuộc tính overflow điều khiển khi nội dung phần tử vượt quá kích thước của một khu vực.

CSS Overflow

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

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

• visible– Mặc định. Phần tràn không được cắt đi. Nội dung hiển thị lên các phần tử bên ngoài hộp.
• hidden – Phần tràn bị cắt bớt và phần nội dung đó sẽ không hiển thị.
• scroll – Phần tràn được cắt bớt và một 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

overflow: visible

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

div {
  width: 200px;
  height: 50px;
  background-color: #eee;
  overflow: visible;
}

overflow: hidden

Với giá trị là hidden, phần tràn được cắt bớt và phần nội dung đó sẽ không hiển thị:

Ví dụ:

div {
  overflow: hidden;
}

overflow: scroll

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

Ví dụ:

div {
  overflow: scroll;
}

overflow: auto

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

Ví dụ:

div {
  overflow: auto;
}

overflow-x and overflow-y

Thuộc tính overflow-x và overflow-y xác định xem có nên thay đổi phần nội dung bị tràn theo chiều ngang hay chiều dọc (hoặc cả hai):

overflow-x xác định những việc cần làm với các cạnh trái / phải của nội dung(nội dung bị tràn theo chiều ngang).

overflow-y xác định những việc cần làm với các cạnh trên / dưới của nội dung(nội dung bị tràn theo chiều dọc).

Ví dụ:

div {
  overflow-x: hidden; 
  overflow-y: scroll;
}

Tất cả các thuộc tính Overflow trong CSS