CSS Overflow: จัดการเนื้อหาล้น (Overflow) ใน CSS

การจัดการเนื้อหาที่ล้น (overflowing content) เป็นฟีเจอร์สำคัญของเว็บดีไซน์ที่ดี

เมื่อออกแบบองค์ประกอบ อาจมีสถานการณ์ที่เนื้อหาไม่พอดีในขอบเขต ทำให้หน้าเว็บแสดงผลไม่คาดคิด นั่นคือที่มาของ CSS overflow property

คุณสมบัติ overflow จัดการกรณีที่เนื้อหาใหญ่เกินพื้นที่ที่กำหนด บทเรียนนี้อธิบายการใช้ overflow property พร้อมตัวอย่าง

CSS Overflow Property

overflow ระบุว่าจะเกิดอะไรขึ้นเมื่อเนื้อหาใหญ่เกินพื้นที่ที่จัดให้

ตัวอย่าง: <div> สูง 250px กว้าง 500px ข้อความเยอะเกินพื้นที่ ใช้ overflow property จัดการ ให้เนื้อหาแสดงถูกต้อง

overflow มี 4 ค่า:

visible (default) — ไม่ตัดเนื้อหาล้น เนื้อหาแสดงนอกกล่อง
scroll — ตัดเนื้อหาล้น เพิ่ม scrollbar ให้ดูเนื้อหาที่เหลือ
hidden — ตัดเนื้อหาล้น ซ่อนส่วนที่ล้น
auto — เพิ่ม scrollbar เมื่อจำเป็นเท่านั้น

overflow ใช้กับ block-level elements ที่มี height เฉพาะเจาะจงเท่านั้น

ตัวอย่างแต่ละค่า Overflow

1. Visible Overflow (ค่าเริ่มต้น)

เนื้อหาไม่ถูกตัด แสดงนอกกล่อง

<style>
  div {
    width: 200px; height: 100px;
    background-color: lightgray;
    overflow: visible;
  }
</style>

<div>This is a box with some text...</div>

ข้อความล้นออกนอกกล่อง อาจรบกวนสไตล์อื่นๆ

2. Scroll Overflow

ตัดเนื้อหาล้น เพิ่ม scrollbar ทั้งแนวตั้งและแนวนอน (แม้จะไม่จำเป็น)

<style>
  div {
    width: 200px; height: 100px;
    background-color: lightgray;
    overflow: scroll;
  }
</style>

มี scrollbar ทั้ง 2 แกน เนื้อหาล้นอยู่ในกล่อง

3. Auto Overflow (แนะนำ)

คล้าย scroll แต่เพิ่ม scrollbar เฉพาะเมื่อจำเป็น

<style>
  div {
    width: 200px; height: 100px;
    background-color: lightgray;
    overflow: auto;
  }
</style>

แสดง scrollbar เพียงแกนเดียวถ้าพอ (เช่น แค่แนวตั้ง)

4. Hidden Overflow

ตัดเนื้อหาล้น ซ่อนส่วนที่ล้น

<style>
  div {
    width: 200px; height: 100px;
    background-color: lightgray;
    overflow: hidden;
  }
</style>

เนื้อหาล้นถูกซ่อนจากผู้ใช้

Overflow-x และ Overflow-y (แยกแกน)

overflow-x และ overflow-y จัดการ overflow แกน x และ y แยกกัน

overflow-x — ด้านซ้าย-ขวา (แนวนอน)
overflow-y — ด้านบน-ล่าง (แนวตั้ง)

ตัวอย่าง: x-axis hidden, y-axis scroll

<style>
  div {
    width: 200px; height: 100px;
    background-color: lightgray;
    overflow-x: hidden;
    overflow-y: scroll;
  }
</style>

ไม่มี horizontal scrollbar (overflow-x: hidden) มี vertical scrollbar (overflow-y: scroll)

สรุป

CSS overflow property ระบุการแสดงเนื้อหาเมื่อใหญ่เกินพื้นที่ บทเรียนนี้ครอบคลุม 4 ค่า: visible, scroll, hidden, auto และ overflow-x/overflow-y สำหรับจัดการแยกแกน ตอนนี้คุณพร้อมใช้ CSS overflow property อย่างเชี่ยวชาญ!