คุณสมบัติล้น CSS
ตัวอย่าง
แสดงค่าคุณสมบัติล้นที่แตกต่างกัน:
div.ex1 {
overflow: scroll;
}
div.ex2 {
overflow: hidden;
}
div.ex3 {
overflow:
auto;
}
div.ex4 {
overflow: visible;
}
ความหมายและการใช้งาน
คุณสมบัติoverflow
ระบุว่าจะเกิดอะไรขึ้นหากเนื้อหาล้นกล่องขององค์ประกอบ
คุณสมบัตินี้ระบุว่าจะตัดเนื้อหาหรือเพิ่มแถบเลื่อนเมื่อเนื้อหาขององค์ประกอบใหญ่เกินกว่าจะพอดีกับพื้นที่ที่ระบุ
หมายเหตุ:คุณสมบัติoverflow
นี้ใช้ได้กับองค์ประกอบบล็อกที่มีความสูงที่ระบุเท่านั้น
ค่าเริ่มต้น: | มองเห็นได้ |
---|---|
รับการถ่ายทอด: | ไม่ |
เคลื่อนไหวได้: | ไม่. อ่านเกี่ยวกับแอนิเมชั่น |
รุ่น: | CSS2 |
ไวยากรณ์ JavaScript: | วัตถุ .style.overflow="scroll" |
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุนคุณสมบัติอย่างสมบูรณ์
Property | |||||
---|---|---|---|---|---|
overflow | 1.0 | 4.0 | 1.0 | 1.0 | 7.0 |
หมายเหตุ:ใน OS X Lion (บน Mac) แถบเลื่อนจะถูกซ่อนไว้โดยค่าเริ่มต้นและแสดงเฉพาะเมื่อใช้งานเท่านั้น (แม้ว่าจะตั้งค่า "overflow:scroll" ไว้)
ไวยากรณ์ CSS
overflow: visible|hidden|scroll|auto|initial|inherit;
มูลค่าทรัพย์สิน
Value | Description | Play it |
---|---|---|
visible | The overflow is not clipped. It renders outside the element's box. This is default | |
hidden | The overflow is clipped, and the rest of the content will be invisible | |
scroll | The overflow is clipped, but a scroll-bar is added to see the rest of the content | |
auto | If overflow is clipped, a scroll-bar should be added to see the rest of the content | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
หน้าที่เกี่ยวข้อง
กวดวิชา CSS: CSS ล้น
กวดวิชา CSS: การจัดตำแหน่ง CSS
การอ้างอิง HTML DOM: คุณสมบัติล้น