Show Định nghĩa và sử dụngThuộc tính overflow xác định điều gì sẽ xảy ra nếu một thành phần box tràn nội dung.
Cấu trúctag {
overflow: giá trị;
}Với giá trị như sau:
HTML viết:<html> <head></head> <body> <p>HỌC WEB CHUẨN<br /> Html4<br /> Html5<br /> Xhtml<br /> Css2<br /> Css3<br /> Jquery<br /> Javascript<br /> Php</p> </body> </html> Giả sử ban đầu CSS viết:p {
border: 1px solid red;
height: 100px;
}Hiển thị trình duyệt khi chưa có thuộc tính overflow:HỌC WEB CHUẨN Html4 Html5 Xhtml Css2 Css3 Jquery Javascript Php Thêm thuộc tính overflow vào CSS:p {
border: 1px solid red;
height: 100px;
overflow: hidden;
}Hiển thị trình duyệt khi đã thêm overflow vào CSS:HỌC WEB CHUẨN Html4 Html5 Xhtml Css2 Css3 Jquery Javascript Php Thêm thuộc tính overflow vào CSS:Hiển thị trình duyệt khi đã thêm overflow vào CSS: Trình duyệt hỗ trợ CSS Overflow - HiddenVới giá trị <html> <head></head> <body> <p>HỌC WEB CHUẨN<br /> Html4<br /> Html5<br /> Xhtml<br /> Css2<br /> Css3<br /> Jquery<br /> Javascript<br /> Php</p> </body> </html>6, Phần tràn bị cắt bớt và phần bị cắt bớt của nội dung sẽ không được hiển thị CSS Overflow - Scroll Đặt giá trị thành CSS Overflow - Auto Thuộc tính <html> <head></head> <body> <p>HỌC WEB CHUẨN<br /> Html4<br /> Html5<br /> Xhtml<br /> Css2<br /> Css3<br /> Jquery<br /> Javascript<br /> Php</p> </body> </html>8 tương tự như scroll, nhưng nó chỉ bổ sung thêm thanh cuộn khi cần thiết.
CSS Overflow - VisibleThuộc tính <html> <head></head> <body> <p>HỌC WEB CHUẨN<br /> Html4<br /> Html5<br /> Xhtml<br /> Css2<br /> Css3<br /> Jquery<br /> Javascript<br /> Php</p> </body> </html>5 là mặc định, có nghĩa là phần nội dung lớn hơn so với phần tử sẽ không bị cắt bớt, mà tiếp tục hiển thị tràn ra bên ngoài của phần tử. Chúng ta có thể sử dụng thuộc tính overflow khi muốn kiểm soát bố cục tốt hơn. Thuộc tính overflow chỉ định điều gì sẽ xảy ra khi nội dung tràn ra bên ngoài của phần tử. Ví dụ <style> div { background-color: #eee; width: 200px; height: 50px; border: 1px dotted black; overflow: visible; } </style> Xem kết quả CSS Overflow - HiddenVới giá trị <html> <head></head> <body> <p>HỌC WEB CHUẨN<br /> Html4<br /> Html5<br /> Xhtml<br /> Css2<br /> Css3<br /> Jquery<br /> Javascript<br /> Php</p> </body> </html>6, Phần tràn bị cắt bớt và phần bị cắt bớt của nội dung sẽ không được hiển thị Chúng ta có thể sử dụng thuộc tính overflow khi muốn kiểm soát bố cục tốt hơn. Thuộc tính overflow chỉ định điều gì sẽ xảy ra khi nội dung tràn ra bên ngoài của phần tử. Ví dụ <style> div { background-color: #eee; width: 200px; height: 50px; border: 1px dotted black; overflow: hidden; } </style> Xem kết quả CSS Overflow - HiddenVới giá trị <html> <head></head> <body> <p>HỌC WEB CHUẨN<br /> Html4<br /> Html5<br /> Xhtml<br /> Css2<br /> Css3<br /> Jquery<br /> Javascript<br /> Php</p> </body> </html>6, Phần tràn bị cắt bớt và phần bị cắt bớt của nội dung sẽ không được hiển thị Chúng ta có thể sử dụng thuộc tính overflow khi muốn kiểm soát bố cục tốt hơn. Thuộc tính overflow chỉ định điều gì sẽ xảy ra khi nội dung tràn ra bên ngoài của phần tử. Ví dụ <style> div { background-color: #eee; width: 200px; height: 50px; border: 1px dotted black; overflow: scroll; } </style> Xem kết quả CSS Overflow - AutoThuộc tính <html> <head></head> <body> <p>HỌC WEB CHUẨN<br /> Html4<br /> Html5<br /> Xhtml<br /> Css2<br /> Css3<br /> Jquery<br /> Javascript<br /> Php</p> </body> </html>8 tương tự như scroll, nhưng nó chỉ bổ sung thêm thanh cuộn khi cần thiết.scroll, nhưng nó chỉ bổ sung thêm thanh cuộn khi cần thiết. Chúng ta có thể sử dụng thuộc tính overflow khi muốn kiểm soát bố cục tốt hơn. Thuộc tính overflow chỉ định điều gì sẽ xảy ra khi nội dung tràn ra bên ngoài của phần tử. Ví dụ <style> div { background-color: #eee; width: 200px; height: 50px; border: 1px dotted black; overflow: auto; } </style> Xem kết quả |
