Thuộc tính overflow dùng để quy định cách thức hiển thị khi kích thước nội dung lớn hơn kích thước box chứa nội dung đó. Có 4 giá trị hay dùng của overflow.
overflow: visible
Đây là giá trị mặc định, theo đó nếu nội dung lớn hơn box thì nó sẽ tràn ra ngoài box, dĩ nhiên trông nó rất xấu, và trong thiết kế, đa số trường hợp ta không được phép để như vậy. Dưới đây là minh họa cụ thể khi nội dung tràn ra ngoài:
overflow: hidden
Giá trị này sẽ làm cho nội dung thừa bị ẩn đi chứ không tràn ra khỏi box nữa. Ví dụ:
overflow: scroll
Rõ ràng là bạn không thể đọc được nội dung dư ra, và nó không tốt chút nào về mặt cung cấp thông tin, để khắc phục điều này ta sử dụng thuộc tính overflow:scroll; Nó sẽ làm xuất hiện thanh cuộn dọc hoặc ngang, hoặc cả hai để giúp độc giả xem nội dung bị ẩn.
Nội dung này lớn hơn kích thước box, nhưng bạn sẽ đọc được thoải mái nội dung bị dư ra (overflow: visible), nó cũng không tràn ra ngoài, nó cũng không bị ẩn (overflow:hidden). Bạn sẽ thấy thanh trượt dọc, kéo nó xuống dưới để đọc tiếp đoạn này!overflow: auto
Tiếp theo là giá trị auto. Code mẫu: overflow:auto; Với khai báo là auto, thanh cuộn chỉ xuất hiện khi nội dung lớn hơn box, còn nếu không lớn hơn thì không xuất hiện. Cái này là khác với scroll, khi sử dụng scroll ngay cả khi nội dung không lớn hơn box thì vẫn xuất hiện thanh ngang và dọc.
Sử dụng giá trị auto, bạn dễ dàng thấy chỉ thanh cuộn dọc xuất hiện, thanh ngang không xuất hiện, vì chỉ có chiều dọc nội dung lớn hơn box nên có thanh cuộn, chiều ngang không lớn hơn nên không có.Thanh cuộn ngang và thanh cuộn dọc
Nếu muốn điều chỉnh cuộn ngang hoặc dọc riêng biệt, bạn chỉ thị cụ thể thanh cuộn nào muốn tác động, nếu là thanh cuộn ngang, sử dụng overflow-x còn thanh cuộn dọc sử dụng overflow-y
Các thông số kỹ thuật
- Giá trị mặc định: visible;
- Kế thừa tự động: không. Tức là các thẻ con cháu không tự động nhận giá trị overflow của thẻ cha;
- Phiên bản CSS: overflow được đưa vào từ CSS2;
- Trình duyệt hỗ trợ: Tất cả các trình duyệt lớn;
Các giá trị có thể của thuộc tính
Tổng hợp ngắn gọn lại nội dung ở phần đầu, các giá trị có thể của overfow là:
- visible: tràn nếu thừa;
- hidden: ẩn nếu thừa;
- scroll: xuất hiện thanh cuộn cho nội dung thừa;
- auto: chỉ xuất hiện cuộn khi thừa, không xuất hiện nếu không thừa;
- inherit: thừa kế từ thẻ cha;
Nhắc thêm về inherit, nếu thẻ A nào đó nhận giá trị inherit, nó sẽ thừa kế giá trị của thuộc tính overflow từ thẻ cha, chẳng hạn thẻ cha là scroll thì thẻ con A cũng scroll. Những thẻ con khác (B, C,..) thì không nhận giá trị scroll vì overflow không kế thừa tự động như ở phần thông số kỹ thuật có nói đến.