Overflow: เลื่อน ตัด และอัตโนมัติ
ควบคุมสิ่งที่จะเกิดขึ้นเมื่อเนื้อหาเกินพื้นที่บรรจุด้วยคุณสมบัติ overflow
Overflow: เลื่อน ตัด และอัตโนมัติ เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
Overflow คืออะไร
Overflow เกิดขึ้นเมื่อเนื้อหาขององค์ประกอบมีขนาดใหญ่กว่าขนาดที่กำหนดไว้ พร็อพเพอร์ตี overflow จะควบคุมว่าจะจัดการกับเนื้อหาส่วนเกินนี้อย่างไร
overflow: visible (ค่าเริ่มต้น)
ตามค่าเริ่มต้น เนื้อหาจะล้นออกมาและมองเห็นได้ด้านนอกกล่องขององค์ประกอบ ซึ่งอาจทำให้เนื้อหาซ้อนทับองค์ประกอบพี่น้องหรือหลุดออกนอกพื้นที่แสดงผล
<div class="box">This text is long enough to spill outside the box edges visibly.</div>
overflow: hidden
overflow: hidden จะตัดเนื้อหาที่ขยายเกินขอบเขตขององค์ประกอบ เนื้อหาที่ถูกตัดจะไม่สามารถเข้าถึงหรือเลื่อนดูได้
<div class="cropped">This long text gets clipped by the rounded box edges instead of spilling out.</div>
overflow: scroll
overflow: scroll จะแสดงแถบเลื่อนเสมอ แม้ว่าเนื้อหาจะพอดีก็ตาม ให้ใช้เมื่อคุณต้องการส่วนติดต่อผู้ใช้ที่สม่ำเสมอไม่ว่าเนื้อหาจะมีขนาดเท่าใด
<pre class="code-block">line 1
line 2
line 3
line 4
line 5
line 6
line 7
line 8
line 9
line 10</pre>
overflow: auto
overflow: auto จะแสดงแถบเลื่อนเฉพาะเมื่อเนื้อหาล้นจริง ๆ โดยทั่วไปจึงเหมาะกว่า scroll เพราะช่วยหลีกเลี่ยงพื้นที่สำหรับแถบเลื่อนที่ไม่จำเป็น
<div class="sidebar"><p>Paragraph one.</p><p>Paragraph two.</p><p>Paragraph three.</p><p>Paragraph four.</p><p>Paragraph five.</p><p>Paragraph six.</p></div>
overflow: clip
overflow: clip คล้ายกับ hidden แต่เข้มงวดกว่า โดยจะไม่สร้างบริบทการจัดรูปแบบแบบบล็อก และไม่สามารถเลื่อนด้วย JavaScript ได้ เหมาะสำหรับการตัดเนื้อหาอย่างปลอดภัยด้านประสิทธิภาพ
<div class="clipped">This long text will be clipped at the box edge with no scrollbar, unlike overflow hidden which still allows programmatic scrolling.</div>
overflow-x และ overflow-y
ควบคุมแต่ละแกนแยกจากกันได้ รูปแบบที่ใช้กันทั่วไปคืออนุญาตให้เลื่อนในแนวนอนสำหรับเนื้อหาที่กว้าง เช่น โค้ดหรือตาราง:
<div class="table-container"><table><tr><td>Col A</td><td>Col B</td><td>Col C</td><td>Col D</td><td>Col E</td><td>Col F</td></tr></table></div>
รูปแบบคอนเทนเนอร์ที่เลื่อนได้
ในการสร้างคอนเทนเนอร์ที่เลื่อนได้ คุณต้องกำหนดทั้งความสูงคงที่และ overflow: auto หรือ scroll:
<div class="chat-messages"><p>Hey!</p><p>How's it going?</p><p>Working on the CSS course.</p><p>Nice, how far are you?</p><p>Almost done with overflow.</p><p>Let's grab lunch after.</p></div>
บริบทการจัดรูปแบบบล็อกจาก overflow
การตั้งค่า overflow เป็นค่าใด ๆ ที่ไม่ใช่ visible จะสร้าง บริบทการจัดรูปแบบบล็อก (BFC) ซึ่งจะควบคุมโฟลตภายในและป้องกันไม่ให้การยุบรวมระยะขอบหลุดออกจากคอนเทนเนอร์
การส่งต่อการเลื่อน
เมื่อคอนเทนเนอร์ที่เลื่อนได้ถูกเลื่อนไปถึงขีดจำกัด เหตุการณ์การเลื่อนสามารถ "ส่งต่อ" ไปยังองค์ประกอบแม่ได้ ใช้ overscroll-behavior: contain เพื่อป้องกันการส่งต่อนี้
<div class="modal-body"><p>Modal content line 1</p><p>Modal content line 2</p><p>Modal content line 3</p><p>Modal content line 4</p><p>Modal content line 5</p><p>Modal content line 6</p></div>
text-overflow เทียบกับ overflow
text-overflow: ellipsis ใช้กับข้อความภายในองค์ประกอบ และต้องใช้ร่วมกับ overflow: hidden + white-space: nowrap จึงจะทำงานได้ ส่วน overflow จะควบคุมพฤติกรรมเนื้อหาล้นขององค์ประกอบนั้นเอง
ตรวจสอบความเข้าใจ
ค่า overflow ใดจะแสดงแถบเลื่อนเฉพาะเมื่อเนื้อหาล้นจริง
สรุป
overflow: hidden จะตัดเนื้อหา overflow: auto จะเพิ่มแถบเลื่อนเฉพาะเมื่อจำเป็น (แนะนำให้ใช้) overflow: scroll จะแสดงแถบเลื่อนเสมอ overflow: clip จะตัดเนื้อหาโดยไม่สร้างบริบทการจัดรูปแบบใหม่ ใช้ overflow-x/y เพื่อควบคุมแต่ละแกนแยกกัน
คำถามที่พบบ่อย
บทเรียน “Overflow: เลื่อน ตัด และอัตโนมัติ” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “Overflow: เลื่อน ตัด และอัตโนมัติ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “Overflow: เลื่อน ตัด และอัตโนมัติ”
ควบคุมสิ่งที่จะเกิดขึ้นเมื่อเนื้อหาเกินพื้นที่บรรจุด้วยคุณสมบัติ overflow คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน
บทเรียน “Overflow: เลื่อน ตัด และอัตโนมัติ” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม
ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- บล็อก เทียบกับอินไลน์ เทียบกับอินไลน์บล็อก
- Visibility เทียบกับ Display None
- Overflow: เลื่อน ตัด และอัตโนมัติ
- การรีเซ็ตและทำให้ CSS เป็นมาตรฐาน