เค้าโครง CSS - ล้น
คุณสมบัติ CSS overflowควบคุมสิ่งที่เกิดขึ้นกับเนื้อหาที่ใหญ่เกินกว่าจะพอดีกับพื้นที่
CSS Overflow
คุณสมบัติoverflowระบุว่าจะตัดเนื้อหาหรือเพิ่มแถบเลื่อนเมื่อเนื้อหาขององค์ประกอบใหญ่เกินกว่าจะพอดีกับพื้นที่ที่ระบุ
คุณสมบัติoverflowมีค่าดังต่อไปนี้:
visible- ค่าเริ่มต้น. น้ำล้นไม่ได้ถูกตัดออก เนื้อหาแสดงผลนอกกรอบขององค์ประกอบhidden- เนื้อหาล้นถูกตัดออก และเนื้อหาที่เหลือจะไม่ปรากฏให้เห็นscroll- โอเวอร์โฟลว์ถูกตัดออก และเพิ่มแถบเลื่อนเพื่อดูเนื้อหาที่เหลือauto- คล้ายกับscrollแต่จะเพิ่มแถบเลื่อนเมื่อจำเป็นเท่านั้น
หมายเหตุ:คุณสมบัติoverflowนี้ใช้ได้กับองค์ประกอบบล็อกที่มีความสูงที่ระบุเท่านั้น
หมายเหตุ:ใน OS X Lion (บน Mac) แถบเลื่อนจะถูกซ่อนไว้โดยค่าเริ่มต้นและแสดงเฉพาะเมื่อใช้งานเท่านั้น (แม้ว่าจะตั้งค่า "overflow:scroll" ไว้)
ล้น: มองเห็นได้
โดยค่าเริ่มต้น โอเวอร์โฟvisibleลว์คือ หมายความว่าจะไม่ถูกตัดและแสดงผลนอกกล่องขององค์ประกอบ:
ตัวอย่าง
div {
width: 200px;
height:
50px;
background-color: #eee;
overflow: visible;
}
ล้น: ซ่อนเร้น
ด้วยhiddenค่า โอเวอร์โฟลว์จะถูกตัดออก และเนื้อหาที่เหลือจะถูกซ่อน:
ตัวอย่าง
div {
overflow: hidden;
}
ล้น: scroll
การตั้งค่าscrollเป็น โอเวอร์โฟลว์จะถูกตัดและเพิ่มแถบเลื่อนเพื่อเลื่อนภายในกล่อง โปรดทราบว่าการดำเนินการนี้จะเพิ่มแถบเลื่อนทั้งในแนวนอนและแนวตั้ง (แม้ว่าคุณจะไม่ต้องการใช้):
ตัวอย่าง
div {
overflow: scroll;
}
ล้น: auto
ค่าautoนี้คล้ายกับscrollแต่จะเพิ่มแถบเลื่อนเมื่อจำเป็นเท่านั้น:
ตัวอย่าง
div {
overflow: auto;
}
ล้น-x และล้น-y
คุณสมบัติoverflow-xand overflow-yระบุว่าจะเปลี่ยนเนื้อหาที่ล้นในแนวนอนหรือแนวตั้ง (หรือทั้งสองอย่าง):
overflow-xระบุว่าจะทำอย่างไรกับขอบซ้าย/ขวาของเนื้อหา
overflow-yระบุว่าจะทำอย่างไรกับขอบบน/ล่างของเนื้อหา
ตัวอย่าง
div {
overflow-x: hidden; /* Hide horizontal scrollbar
*/
overflow-y: scroll; /* Add vertical scrollbar */
}
คุณสมบัติโอเวอร์โฟลว์ CSS ทั้งหมด
| Property | Description |
|---|---|
| overflow | Specifies what happens if content overflows an element's box |
| overflow-wrap | Specifies whether or not the browser can break lines with long words, if they overflow its container |
| overflow-x | Specifies what to do with the left/right edges of the content if it overflows the element's content area |
| overflow-y | Specifies what to do with the top/bottom edges of the content if it overflows the element's content area |