Các overflowkiểm soát tài sản gì xảy ra với nội dung vi phạm bên ngoài giới hạn của nó: hãy tưởng tượng một divtrong đó bạn đã dứt khoát thiết lập để được 200px rộng, nhưng chứa một hình ảnh mà là 300px rộng. Hình ảnh đó sẽ nằm ngoài div và là visibletheo mặc định. Trong khi nếu bạn đặt overflowgiá trị thành hidden, hình ảnh sẽ bị cắt ở 200px.
div ( overflow: visible | hidden | scroll | auto | inherit )Giá trị
visible: nội dung không bị cắt bớt khi tiếp tục bên ngoài hộp của nó. Đây là giá trị mặc định của thuộc tínhhidden: nội dung tràn sẽ bị ẩn.scroll: tương tự như ẩn ngoại trừ người dùng sẽ có thể cuộn qua nội dung ẩnauto: nếu nội dung tiếp tục bên ngoài hộp của nó thì nội dung đó sẽ bị ẩn trong khi thanh cuộn sẽ hiển thị để người dùng đọc phần còn lại của nội dung.initial: sử dụng giá trị mặc định làvisibleinherit: đặt phần tràn thành giá trị của phần tử mẹ của nó.
Hãy nhớ rằng văn bản sẽ tự nhiên nằm ở cuối phần tử (trừ khi khoảng trắng được thay đổi) vì vậy văn bản sẽ hiếm khi là nguyên nhân gây tràn. Trừ khi chiều cao được đặt, văn bản cũng sẽ đẩy một phần tử lên cao hơn. Overflow phát huy tác dụng phổ biến hơn khi chiều rộng và chiều cao rõ ràng được đặt và sẽ không mong muốn bất kỳ nội dung nào tràn ra ngoài hoặc khi việc cuộn được tránh một cách rõ ràng.
Có thể nhìn thấy
Nếu bạn không đặt thuộc tính tràn nào, thì mặc định sẽ hiển thị. Vì vậy, nói chung, không có lý do gì để đặt thuộc tính này một cách rõ ràng là hiển thị trừ khi bạn đang ghi đè nó khỏi được đặt ở nơi khác.
Điều quan trọng cần nhớ ở đây là mặc dù nội dung có thể nhìn thấy bên ngoài hộp, nội dung đó không ảnh hưởng đến dòng chảy của trang. Ví dụ:
Nói chung, bạn không nên đặt chiều cao tĩnh trên các hộp có văn bản web trong đó, vì vậy nó sẽ không xuất hiện.
Ẩn
Ngược lại với hiển thị mặc định bị ẩn . Điều này thực sự ẩn bất kỳ nội dung nào vượt ra ngoài hộp.
Điều này đặc biệt hữu ích khi sử dụng với nội dung động và khả năng xảy ra hiện tượng tràn gây ra các vấn đề nghiêm trọng về bố cục. Tuy nhiên, hãy nhớ rằng nội dung bị ẩn theo cách này hoàn toàn không thể truy cập được (thiếu nguồn xem). Vì vậy, ví dụ: một người dùng đặt kích thước phông chữ mặc định của họ lớn hơn bạn mong đợi, bạn có thể đẩy văn bản ra bên ngoài hộp và ẩn nó hoàn toàn khỏi chế độ xem của họ.
Cuộn
Đặt giá trị tràn của hộp để cuộn sẽ ẩn nội dung hiển thị bên ngoài hộp, nhưng sẽ cung cấp thanh cuộn để cuộn bên trong hộp để xem nội dung.
Lưu ý với giá trị này là bạn nhận được CẢ hai thanh cuộn ngang và dọc bất kể điều gì, ngay cả khi nội dung chỉ yêu cầu cái này hay cái kia.
Cuộn động lượng của iOS có thể được bật cho giá trị này với -webkit-overflow-scrolling.
Lưu ý: Trong OS X Lion, khi thanh cuộn được đặt thành chỉ hiển thị khi được sử dụng, scrollhoạt động giống hơn auto, trong đó chỉ những thanh cuộn cần thiết mới hiển thị.
Tự động
Tự động tràn rất giống với giá trị cuộn, chỉ có điều nó giải quyết vấn đề nhận thanh cuộn khi bạn không cần đến chúng. Các thanh cuộn sẽ chỉ hiển thị nếu có nội dung thực sự thoát ra khỏi phần tử.
tràn-x và tràn-y
Cũng có thể thao tác tràn nội dung theo chiều ngang hoặc chiều dọc với các thuộc tính overflow-xvà overflow-y. Ví dụ trong bản trình diễn bên dưới phần tràn ngang có thể được cuộn qua trong khi văn bản vượt quá chiều cao của hộp bị ẩn:
.box ( overflow-y: hidden; overflow-x: scroll; )Thanh toán bù trừ
Một trong những cách sử dụng phổ biến hơn của thiết lập tràn, kỳ lạ thay, là xóa phao. Đặt tràn không xóa float tại phần tử, nó tự xóa. Điều này có nghĩa là phần tử bị tràn (bất kỳ giá trị nào ngoại trừ visible) sẽ mở rộng đến mức cần thiết để bao gồm các phần tử con bên trong được thả nổi (thay vì thu gọn), giả sử rằng chiều cao không được khai báo. Như thế này:
Một kỹ thuật xóa float tốt hơn là clearfix, vì nó không yêu cầu bạn thay đổi thuộc tính tràn theo cách bạn không cần.
Tạo ngữ cảnh định dạng khối
Điều thú vị cần lưu ý là overflowcũng sẽ tạo ra một ngữ cảnh định dạng khối mới rất hữu ích nếu chúng ta muốn căn chỉnh một phần tử khối bên cạnh một phần tử nổi. Trong ví dụ bên dưới, chúng tôi chỉ ra cách một số đoạn văn sẽ tương tác với một hình ảnh nổi theo mặc định và sau đó chúng tôi sử dụng overflow: hiddenđể căn chỉnh văn bản trong hộp của chính nó:
Điều này đến từ một bài đăng tuyệt vời của Nicole Sullivan đã tiếp tục truyền cảm hứng cho đối tượng truyền thông.
Thanh cuộn có thể được tạo kiểu bằng CSS không?
Bạn đã từng có thể tạo kiểu thanh cuộn trong IE (v5.5?) Nhưng không còn nữa. Bây giờ bạn có thể tạo kiểu lại chúng trong trình duyệt WebKit. Nếu bạn cần thanh cuộn tùy chỉnh trên nhiều trình duyệt, hãy tìm đến JavaScript.
Nếu một phần tử cần có thêm các thanh cuộn để tôn trọng giá trị tràn, Firefox sẽ đặt chúng bên ngoài phần tử, giữ nguyên chiều rộng / chiều cao hiển thị như đã khai báo. IE đặt các thanh cuộn bên trong, giữ nguyên chiều rộng / chiều cao như đã khai báo.
Bản giới thiệu
Bản trình diễn cho bài viết này được lấy từ trang mẫu này.
Hỗ trợ trình duyệt
Dữ liệu hỗ trợ trình duyệt này là từ Caniuse, có nhiều chi tiết hơn. Một con số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.
Máy tính để bàn
| Trình duyệt Chrome | Firefox | I E | Cạnh | Safari |
|---|---|---|---|---|
| 91 | 87 | 11 | 88 | TP. |
Di động / Máy tính bảng
| Chrome dành cho Android | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 14.0-14.4 |
Có liên quan
- Thuộc tính float
Thêm thông tin
- Hiểu rõ về Humble Clearfix
- Tràn: một lợi ích bí mật
- Tràn trên MDN
- Tràn trên W3C
- Tìm / sửa lỗi tràn phần thân ngoài ý muốn