Get Adobe Flash player

CSS : การใช้ overflow ในการจำกัดพื้นที่แสดงข้อมูล

กรณีที่เราอยากจัด layout บนหน้าเว็บเพจให้สวยงาม โดยกำหนดว่าอยากจะให้ข้อมูลแสดงภายในขนาดพื้นที่ๆจัดไว้ เราสามารถกำหนด style ด้วยคำสั่ง overflow เพื่อช่วยจัดการในกรณีที่ข้อมูลมีเนื้อหาหรือขนาดใหญ่เกินพื้นที่ๆกำหนดได้ ด้วยคำสั่ง

 

– overflow: รูปแบบที่ต้องการให้แสดง;

 

overflow สามารถแสดงผลในรูปแบบต่างๆ ตามตัวอย่าง โดยสมมติกำหนดพื้นที่แสดงข้อมูลเป็นพื้นที่สีฟ้า เมื่อเขียนคำสั่งรูปแบบต่างๆจะให้ผลต่างกันดังนี้

  •  overflow: visible แสดงข้อมูลที่ต้องการทั้งหมด

  • overflow: hidden ซ่อนข้อมูลส่วนที่ล้นเกินพื้นที่

  • overflow: scroll แสดงข้อมูลทั้งหมดภายใต้พื้นที่ที่กำหนด โดยใช้ scroll bar แสดงผลส่วนที่ล้น

  • overflow: auto แสดงผลอัตโนมัติ ถ้าข้อมูลเกินก็จะมีแถบ scroll bar ขึ้นให้ (ในรูปตัวอย่างข้อมูลเกิน จึงแสดงผลเหมือน scroll)

 

Leave a Reply

Your email address will not be published. Required fields are marked *