Monday, 15 July 2024

เมื่อข้อความล้นกล่อง ต้องใช้ Overflow ใน CSS

02 May 2018
143
luminox watches

overflow เป็น Property ใน CSS ที่ใช้สำหรับกำหนดว่าจะแสดงข้อมูลที่เกินพื้นที่หรือไม่ใน Element ที่กำหนด โดยมีค่าที่สามารถกำหนดได้ 4 ค่า คือ:

เมื่อข้อความล้นกล่องต้องใช้-overflow-css

เมื่อข้อความล้นกล่องต้องใช้-overflow-css

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

/* ซ่อนส่วนเกินของ Element */
.element {
overflow: hidden;
}
/* แสดงเป็นแถบ Scroll bar */
.element {
overflow: scroll;
}

/* ให้เลือกโดยอัตโนมัติ */
.element {
overflow: auto;
}
/* แสดงทุกส่วนของ Element */
.element {
overflow: visible;
}
Thanat Sirikitphattana

แบ่งปันกัน เราอยู่กันไม่เกิน 100 ปีหรอกครับ
สุดท้ายก็ทิ้งไว้ที่โลก จะคงเหลือไว้แต่คุณงามความดีที่ให้ระลึกถึงกันครับ

Follow Us / Thanat Sirikitphattana