- visible (มองเห็นได้)
- hidden (ซ่อน)
- scroll (เลื่อน)
- auto (อัตโนมัน)
ตัวอย่างโค้ด ดังนี้
โค้ด: เลือกทั้งหมด
<!DOCTYPE>
<html>
<head>
<style>
p {
width:100px;
height:80px;
border:1px solid;
overflow:visible;
}
</style>
</head>
<body>
<h2>
Welcome to Mindphp
</h2>
<p>
The CSS overflow controls big content.
It tells whether to clip content or to add scroll bars.
</p>
</body>
</html>
ตัวอย่างโค้ด เปลี่ยนเป็น overflow:hidden; ดังนี้
โค้ด: เลือกทั้งหมด
p {
width:100px;
height:80px;
border:1px solid;
overflow:hidden;
}
ตัวอย่างโค้ด เปลี่ยนเป็น overflow:scroll; ดังนี้
โค้ด: เลือกทั้งหมด
p {
width:120px;
height:100px;
border:1px solid;
overflow:scroll;
}
ตัวอย่างโค้ด เปลี่ยนเป็น overflow:auto; ดังนี้
โค้ด: เลือกทั้งหมด
p {
width:120px;
height:100px;
border:1px solid;
overflow:auto;
}
ตัวอย่างโค้ด ได้กำหนดไว่า overflow-x: scroll;(ให้มีแถบเลื่อน) และ overflow-y:hidden; (ซ่อนแถบเลื่อน) ดังนี้
โค้ด: เลือกทั้งหมด
p {
width:120px;
height:100px;
border:1px solid;
overflow-x:scroll;
overflow-y:hidden;
}
-สอนการใช้งาน HTML & CSS
-ถามตอบ HTML CSS
-บทเรียน CSS
-บทเรียน HTML5
-แลกเปลี่ยนความรู้ PHP