Overflow trong CSS (CSS Overflow) | Lập Trình Từ Đầu

Thuộc tính overflow chỉ định cắt nội dung hoặc 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 này gồm các giá trị sau:

  • visible – Mặc định, phần tràn không được 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 còn lại của 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

Lưu ý: Thuộc tính overflow chỉ hoạt động đối với các phần tử khối có chiều cao được chỉ định

1. Thuộc tính overflow: visible;

Theo mặc định, overflow có giá trị là visible, có 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ử

Ví dụ:

 

See the Pen
Untitled by sonson (@sonsonct)
on CodePen.

2. Thuộc tính overflow: hidden;

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

Ví dụ:

See the Pen
Untitled by sonson (@sonsonct)
on CodePen.

3. Thuộc tính overflow: scroll;

Đặt giá trị là scroll , 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 nội dung

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ụ:

See the Pen
Untitled by sonson (@sonsonct)
on CodePen.

4. Thuộc tính 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ụ:

See the Pen
Untitled by sonson (@sonsonct)
on CodePen.

 

5. Thuộc tính overflow-x và overflow-y

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

  • overflow-x chỉ định phần cạnh trái / phải của nội dung
  • overflow-y chỉ định phần cạnh trên / dưới của nội dung

Ví dụ:

See the Pen
Untitled by sonson (@sonsonct)
on CodePen.