[CSS] – Thuộc tính Overflow

Thuộc tính Overflow chỉ định nên 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 để phù hợp với một khu vực xác định.

Thuộc tính Overflow có 4 giá trị:

  • visible: giá trị mặc định. Nội dung tràn không được cắt bớt. Phần nội dung tràn được hiển thị bên ngoài hộp chứa của phần tử.
  • hidden: nội dung tràn sẽ bị cắt bớt và không được hiển thị.
  • scroll: nội dung tràn sẽ bị cắt bớt và một thanh cuộn được thêm vào để có thể xem được phần nội dung tràn này.
  • auto: tương tự giá trị scroll, nhưng tự động thêm thanh cuộn khi có nội dung tràn.

Chú ý: thuộc tính overflow chỉ làm việc với các phần tử khối có chiều cao xác định.

1. Overflow: visible

Mặc định giá trị của thuộc tính Overflow là visible, phần nội dung bị thừa ra ngoài hình khối sẽ không bị cắt xén.

Ví dụ 1:

Kết quả:

Thẻ div có chiều dài 300px, chiều rộng 100px. Do nội dung hiển thị trong thẻ div có chiều cao lớn hơn 100px nên bị tràn ra ngoài phạm vi của thẻ div. Với thuộc tính visible nội dung này vẫn hiển thị bên ngoài phạm vi của thẻ div và không bị cắt xén.

Thuộc tính Overflow: visible
Hình 1. Thuộc tính Overflow với Visible

2. Overflow: hidden

Giá trị hidden của thuộc tính Overflow, sẽ cắt xén phần nội dung bị tràn và không hiển thị nội dung này trên phạm vi của phần tử được xét.

Ví dụ 2:

Kết quả:

Cũng với nội dung như ví dụ 1, nhưng phần nội dung bị tràn ra ngoài thẻ div đã được cắt xén và không hiển thị.

Do vậy, chữ Xamarin đã bị cắt đi 1 nửa, 2 dòng chữ Angular và React Native không được hiển thị.

Thuộc tính Overflow với hidden
Hình 2. Thuộc tính Overflow với Hidden

3. Overflow: scroll

Thuộc tính Overflow với scroll sẽ thêm một hình hộp với thanh cuộn để chứa các nội dung bị tràn trong văn bản. Do vậy, nội dung bị tràn sẽ không bị mất đi.

Ví dụ 3:

Kết quả:

Thuộc tính Overflow với giá trị Scroll
Hình 3. Thuộc tính Overflow với Scroll

4. Overflow: auto

Giá trị auto của thuộc tính overflow tương tự như scroll nhưng hộp thanh cuộn chỉ xuất hiện khi có nội dung tràn, ngược lại sẽ không có hộp thanh cuộn.

Ví dụ 4:

Kết quả: Trong ví dụ 4, có 2 phần từ DIV:

  • Phần tử Div đầu tiên có nội dung bị tràn, nên hộp thanh cuộn xuất hiện.
  • Phần tử Div thứ hai có nội dung không bị tràn, nên hộp thanh cuộn không xuất hiện.

 

Overflow với giá trị auto
Hình 4. Thuộc tính Overflow với giá trị Auto

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.