CSS มีคุณสมบัติชื่อ overflow ซึ่งบอกเบราว์เซอร์ว่าต้องทำอย่างไรเมื่อเนื้อหาภายในกล่องใหญ่กว่ากล่องเอง คุณสมบัตินี้สามารถรับค่าได้ดังนี้:
| ค่า | คำอธิบาย |
|---|---|
| visible | อนุญาตให้เนื้อหาล้นออกนอกขอบเขตของอีเลเมนต์บรรจุ |
| hidden | เนื้อหาถูกตัดออกที่ขอบเขตของอีเลเมนต์บรรจุ และไม่มีแถบเลื่อนแสดง |
| scroll | ขนาดของอีเลเมนต์บรรจุไม่เปลี่ยนแปลง แต่จะเพิ่มแถบเลื่อนเพื่อให้ผู้ใช้เลื่อนดูเนื้อหาได้ |
| auto | ทำงานเหมือน scroll แต่แถบเลื่อนจะแสดงเฉพาะเมื่อเนื้อหาล้นจริงๆ |
ตัวอย่าง
ลองรันโค้ดต่อไปนี้เพื่อนำคุณสมบัติ overflow ไปใช้:
<html> <head> </head> <style> .scroll{ display:block; border: 2px solid green; padding:10px; margin-top:10px; width:300px; height:50px; overflow:scroll; } .auto{ display:block; border: 2px solid green; padding:10px; margin-top:10px; width:300px; height:50px; overflow:auto; } </style> <body> <p>ตัวอย่างค่า scroll:</p> <div class = "scroll"> ฉันจะวางเนื้อหามากๆ ที่นี่เพื่อแสดงให้เห็นว่าข้อความทำงานอย่างไรเมื่อมีการล้นในกล่องอีเลเมนต์ สิ่งนี้ให้แถบเลื่อนทั้งแนวนอนและแนวตั้ง </div> <br /> <p>ตัวอย่างค่า auto:</p> <div class = "auto"> ฉันจะวางเนื้อหามากๆ ที่นี่เพื่อแสดงให้เห็นว่าข้อความทำงานอย่างไรเมื่อมีการล้นในกล่องอีเลเมนต์ นี่คือ แถบเลื่อนทั้งแนวนอนและแนวตั้ง </div> </body> </html>