overflow เป็น Property ใน CSS ที่ใช้สำหรับกำหนดว่าจะแสดงข้อมูลที่เกินพื้นที่หรือไม่ใน Element ที่กำหนด โดยมีค่าที่สามารถกำหนดได้ 4 ค่า คือ:
เมื่อข้อความล้นกล่องต้องใช้-overflow-css
visible: แสดงทุกส่วนของ Element โดยไม่คำนึงถึงขนาดหรือพื้นที่แสดงผล
hidden: ซ่อนส่วนของ Element ที่เกินขนาดหรือพื้นที่ที่กำหนด โดยจะไม่แสดงให้เห็น
scroll: แสดงเป็นแถบ Scroll bar เพื่อให้ผู้ใช้เลื่อนแสดงส่วนของ Element ที่เกินพื้นที่แสดงผล
auto: จะเป็นการเลือกโดยอัตโนมัติว่าจะแสดงแถบ Scroll bar หรือไม่ โดยขึ้นอยู่กับการเกิดเหตุการณ์การเกินพื้นที่หรือไม่
โดย overflow สามารถใช้ได้กับ Element ที่มีเนื้อหาเกินพื้นที่แสดงผล เช่น
/* ซ่อนส่วนเกินของ Element */
.element {
overflow: hidden;
}
.element {
overflow: hidden;
}
/* แสดงเป็นแถบ Scroll bar */
.element {
overflow: scroll;
}
.element {
overflow: scroll;
}
/* ให้เลือกโดยอัตโนมัติ */
.element {
overflow: auto;
}
.element {
overflow: auto;
}
/* แสดงทุกส่วนของ Element */
.element {
overflow: visible;
}
.element {
overflow: visible;
}
