CSS overflow การเกินความกว้างหรือความสูง
- หน้าก่อน outline-width
- หน้าต่อไป overflow-anchor
คำอธิบายและการใช้งาน
overflow คุณสมบัตินี้กำหนดว่าเมื่อเนื้อหาเกินขอบเขตขององค์ประกอบจะเกิดอะไรขึ้น。
คำอธิบาย
คุณสมบัตินี้กำหนดว่าเนื้อหาขององค์ประกอบที่มีข้อมูลที่เกินขอบเขตจะถูกจัดการอย่างไร。หากค่าเป็น scroll บราวเซอร์จะให้โซ่เลื่อนไม่ว่าจำเป็นหรือไม่ ดังนั้นอาจจะมีโซ่เลื่อนแม้ว่าเนื้อหาจะสามารถที่จะเข้ากับช่องโซ่ได้。
ดูเพิ่มเติม
ตัวอย่าง CSSการจัดตำแหน่ง CSS
คู่มืออ้างอิง HTML DOMคุณสมบัติ overflow
ตัวอย่าง
ตั้งค่าคุณสมบัติ overflow:
div
{
width:150px;
height:150px;
overflow:scroll;
}
ภาษา CSS
overflow: visible|hidden|clip|scroll|auto|initial|inherit;
ค่าของคุณสมบัติ
| ค่า | คำอธิบาย |
|---|---|
| visible | ค่าเริ่มต้น。เนื้อหาจะไม่ถูกตัดทอน และจะแสดงออกนอกช่องโซ่ขององค์ประกอบ。 |
| hidden | เนื้อหาถูกตัดทอน และเนื้อหาที่เหลืออยู่ไม่สามารถเห็นได้。 |
| scroll | เนื้อหาถูกตัดทอน แต่บราวเซอร์จะแสดงโซ่เลื่อนเพื่อดูเนื้อหาที่เหลืออยู่。 |
| auto | ถ้าเนื้อหาถูกตัดทอน บราวเซอร์จะแสดงโซ่เลื่อนเพื่อดูเนื้อหาที่เหลืออยู่。 |
| inherit | กำหนดให้คุณสมบัติ overflow จากองค์ประกอบพ่อมีค่าตามคุณสมบัติ overflow ของมัน。 |
รายละเอียดเทคโนโลยี
| ค่าเริ่มต้น: | visible |
|---|---|
| นิยม: | no |
| เวอร์ชั่น: | CSS2 |
| JavaScript ภาษา: | object.style.overflow="scroll" |
ตัวอย่างเพิ่มเติม
- วิธีการใช้โซ่เลื่อนเพื่อแสดงข้อมูลที่เกินขอบเขตขององค์ประกอบ
- ตัวอย่างนี้แสดงวิธีการตั้งค่าคุณสมบัติ overflow ในกรณีที่ข้อมูลในองค์ประกอบมีขนาดใหญ่เกินไปจนเกินพื้นที่ที่กำหนดไว้。
- วิธีการซ่อนองค์ประกอบที่มีข้อมูลที่เกินขอบเขต
- ตัวอย่างนี้แสดงวิธีการตั้งค่าคุณสมบัติ overflow ในกรณีที่ข้อมูลในองค์ประกอบมีขนาดใหญ่เกินไปจนไม่สามารถปรับขนาดเพื่อให้เข้ากับพื้นที่ที่กำหนดไว้ได้。
- วิธีการตั้งค่าเบราเซอร์เพื่อที่จะประคอบควบการแสดงผลของข้อมูลที่เกินขอบเขตอัตโนมัติ
- ตัวอย่างนี้แสดงวิธีการตั้งค่าเบราเซอร์เพื่อที่จะประคอบควบการแสดงผลของข้อมูลที่เกินขอบเขตอัตโนมัติ。
การสนับสนุนโดยเบราเซอร์
ตัวเลขในตารางระบุตัวแบบบราวรอบแรกที่สนับสนุนคุณสมบัตินี้อย่างเต็มที่。
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 1.0 | 4.0 | 1.0 | 1.0 | 7.0 |
- หน้าก่อน outline-width
- หน้าต่อไป overflow-anchor
