Thuộc tính tràn CSS
Ví dụ
Hiển thị các giá trị thuộc tính tràn khác nhau:
div.ex1 {
overflow: scroll;
}
div.ex2 {
overflow: hidden;
}
div.ex3 {
overflow:
auto;
}
div.ex4 {
overflow: clip;
}
div.ex5 {
overflow: visible;
}
Hãy tự mình thử »Định nghĩa và cách sử dụng
Thuộc tính overflow
chỉ định điều gì sẽ xảy ra nếu nội dung tràn vào hộp của một phần tử.
Thuộc tính này chỉ định cắt nội dung hay thêm thanh cuộn khi nội dung của phần tử quá lớn để vừa với một khu vực được chỉ định.
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.
Giá trị mặc định: | dễ thấy |
---|---|
Thừa hưởng: | KHÔNG |
Hoạt hình: | KHÔNG. Đọc về hoạt hình |
Phiên bản: | CSS2 |
Cú pháp JavaScript: | đối tượng .style.overflow="scroll" Hãy thử |
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.
Property | |||||
---|---|---|---|---|---|
overflow | 1.0 | 4.0 | 1.0 | 1.0 | 7.0 |
Lưu ý: Trong OS X Lion (trên Mac), thanh cuộn bị ẩn theo mặc định và chỉ hiển thị khi được sử dụng (mặc dù "tràn: cuộn" được đặt).
Cú pháp CSS
overflow: visible|hidden|clip|scroll|auto|initial|inherit;
Giá trị tài sản
Value | Description | Demo |
---|---|---|
visible | The overflow is not clipped. It renders outside the element's box. This is default | Demo ❯ |
hidden | The overflow is clipped, and the rest of the content will be invisible. Content can be scrolled programmatically (e.g. by setting scrollLeft or scrollTo()) | Demo ❯ |
clip | The overflow is clipped, and the rest of the content will be invisible. Forbids scrolling, including programmatic scrolling. | Demo ❯ |
scroll | The overflow is clipped, but a scroll-bar is added to see the rest of the content | Demo ❯ |
auto | If overflow is clipped, a scroll-bar should be added to see the rest of the content | Demo ❯ |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Trang liên quan
Hướng dẫn CSS: Tràn CSS
Hướng dẫn CSS: Định vị CSS
Tham chiếu DOM HTML: thuộc tính tràn