CSS ให้คุณสมบัติที่เรียกว่า ล้น ซึ่งบอกเบราว์เซอร์ว่าต้องทำอย่างไรหากเนื้อหาของกล่องมีขนาดใหญ่กว่าตัวกล่องเอง คุณสมบัตินี้สามารถรับค่าใดค่าหนึ่งต่อไปนี้ -
| ค่า | คำอธิบาย |
|---|---|
| visible | อนุญาตให้เนื้อหาล้นขอบขององค์ประกอบที่มีอยู่ |
| ซ่อนอยู่ | เนื้อหาขององค์ประกอบที่ซ้อนกันนั้นถูกตัดออกอย่างง่าย ๆ ที่เส้นขอบขององค์ประกอบที่มีอยู่ และจะไม่มีแถบเลื่อนปรากฏให้เห็น |
| scroll | ขนาดขององค์ประกอบที่มีอยู่ไม่เปลี่ยนแปลง แต่มีการเพิ่มแถบเลื่อนเพื่อให้ผู้ใช้สามารถเลื่อนเพื่อดูเนื้อหาได้ |
| อัตโนมัติ | จุดประสงค์เหมือนกับการเลื่อน แต่แถบเลื่อนจะแสดงก็ต่อเมื่อเนื้อหาล้น |
ตัวอย่าง
คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อใช้งานโอเวอร์โฟลว์ ทรัพย์สิน −
<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>Example of scroll value:</p>
<div class = "scroll">
I am going to keep lot of content here just to show you how
scrollbars works if there is an overflow in an element box.
This provides your horizontal as well as vertical scrollbars.
</div>
<br />
<p>Example of auto value:</p>
<div class = "auto">
I am going to keep lot of content here just to show you how scrollbars
works if there is an overflow in an element box. This provides your
horizontal as well as vertical scrollbars.
</div>
</body>
</html> 