พื้นฐาน CSS

Overflow

คำสั่งสำหรับควบคุมขนาดของตัวหนังสือและภาพที่อยู่ภายใน element

เราสามารถกำหนดความสูงและความกว้างให้กับวัตถุในเว็บเพจได้เช่น

div {
    height: 40px;
    width: 40px;
}

ทุก div ที่อยู่ภายในเว็บเพจจะมีขนาด 40x40 pixel ในกรณีที่มีตัวหนังสือใน div หรือภาพที่มีขนาดใหญ่กว่า 40x40 pixel เราต้องการให้มันแสดงผลได้อย่างไรเราจะใช้คำสั่ง overflow เพื่อจัดการมันได้ โดยเราสามารถแสดงผลได้ทั้งหมด 4 แบบดังนี้

Visible แสดงตัวอักษรที่อยู่ในกล่องทั้งหมด
Hidden ซ่อนตัวอักษรที่ล้นกล่องออกมา
Scroll ใช้ scroll bar แสดงผลตัวอักษรที่ล้นกล่อง
Auto แสดงผลอัตโนมัติ คือถ้ามีข้อความล้นกล่องก็จะแสดง scroll ถ้าไม่มีก็จะแสดงกล่องธรรมดา

รูปแบบการแสดงผลคำสั่ง overflow

div {    
    overflow: auto;
}

คลิกเพื่อทดลองเขียนด้วยตัวเอง


เลื่อนขึ้นด้านบน