สมัครเรียนโทร. 085-350-7540 , 084-88-00-255 , ntprintf@gmail.com
การออกแบบเว็บไซต์ในยุคปัจจุบันไม่เพียงแค่ต้องมีหน้าตาที่สวยงามและใช้งานได้สะดวก แต่ยังต้องสามารถปรับเปลี่ยนขนาดของหน้าจอได้อย่างดี ตัวแปรสำคัญในการจัดการองค์ประกอบในหน้าเว็บหนึ่งตัวที่มักจะถูกมองข้ามคือ "Overflow Property" ของ CSS ซึ่งมีบทบาทสำคัญในการจัดการกับเนื้อหาที่ล้นออกมาจากกรอบที่กำหนดไว้
#### Overflow Property คืออะไร?
Overflow Property ใน CSS ใช้สำหรับระบุวิธีการจัดการกับเนื้อหาที่ล้นออกมานอกกว่าขนาดพื้นที่ที่กำหนดไว้ในบล็อกหรือคอนเทนเนอร์ นี่คือ property นึงที่มีประโยชน์มากเมื่อคุณต้องการควบคุมการแสดงผลของ content ที่ใหญ่มากกว่าพื้นที่ที่เตรียมไว้ให้
##### ค่าต่างๆ ของ Overflow
1. visible: เป็นค่า default ที่ใช้แสดงเนื้อหาทั้งหมดที่ล้นออกมานอกกรอบ โดยไม่ทำการซ่อน มักจะไม่นิยมใช้งานในระบบ responsive layout 2. hidden: ซ่อนเนื้อหาที่ล้นออกมาจากกรอบโดยไม่ทำการเลื่อน ซึ่งทำให้องค์ประกอบทั้งหมดอยู่ในขอบเขตของ container 3. scroll: เพิ่ม scrollbar เพื่อให้ผู้ใช้สามารถเลื่อนไปดูเนื้อหาเพิ่มเติมได้ แม้ว่าเนื้อหาภายในจะน้อยกว่า container นั้น scrollbar ก็จะยังคงแสดงผลอยู่เสมอ 4. auto: ทำการเลื่อนเพื่อแสดงเนื้อหาที่ล้นเฉพาะเวลาจำเป็นเท่านั้น เช่น จะแสดง scrollbar ก็ต่อเมื่อมีเนื้อหาที่ต้องการแสดงเพิ่มเติม#### การใช้งาน Overflow Property ในงานจริง
มาดูตัวอย่างการใช้งาน Overflow Property เบื้องต้นกันเถอะ โดยจะแสดงผลอยู่ 4 รูปแบบที่เราได้กล่าวถึงไป
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ตัวอย่างการใช้ Overflow</title>
<style>
.box {
width: 200px;
height: 100px;
border: 1px solid black;
margin-bottom: 10px;
}
.visible { overflow: visible; }
.hidden { overflow: hidden; }
.scroll { overflow: scroll; }
.auto { overflow: auto; }
</style>
</head>
<body>
<div class="box visible">
<p>Visible: เนื้อหาล้นออกมาจาก container แต่ยังแสดงอยู่</p>
</div>
<div class="box hidden">
<p>Hidden: เนื้อหาล้นจะถูกซ่อนโดยไม่แสดง scrollbar</p>
</div>
<div class="box scroll">
<p>Scroll: มี scrollbar ให้เลื่อนดูเนื้อหาที่ล้นออกมา</p>
</div>
<div class="box auto">
<p>Auto: scrollbar จะปรากฎต่อเมื่อมีเนื้อหาล้น</p>
</div>
</body>
</html>
#### Use Case: เว็บไซต์ที่ต้องการแสดงผล Responsive
การใช้งาน Overflow Property สามารถเป็นประโยชน์อย่างยิ่งในเว็บไซต์ที่ต้องการปรับเปลี่ยนขนาดหน้าจอ เช่น การสร้างป้ายโฆษณาสำหรับอุปกรณ์มือถือ หากเนื้อหาของโฆษณาล้นออกมาจากขนาดที่กำหนด การตั้ง Overflow Property เป็น `hidden` หรือ `auto` จะช่วยทำให้การแสดงผลดูเรียบร้อยสะอาดตาขึ้น
#### ข้อควรระวัง
การใช้ค่า `hidden` ควรระวังเป็นพิเศษ เพราะว่าเนื้อหาที่ถูกซ่อนไม่สามารถเข้าถึงได้จากหน้าจอนั้น ๆ ซึ่งอาจทำให้ข้อมูลสำคัญหายไปจากส่วนที่ผู้ใช้สามารถมองเห็นได้
#### บทสรุป
Overflow Property เป็นอีกหนึ่งเครื่องมือที่สำคัญในการออกแบบเว็บไซต์ที่สามารถรองรับความหลากหลายของขนาดหน้าจอ โดยเฉพาะในยุคที่ Responsive Design คือมาตรฐานของการพัฒนาเว็บไซต์ การเลือกใช้ค่าที่เหมาะสมตามสถานการณ์สามารถช่วยทำให้หน้าเว็บไซต์ดูเป็นระเบียบเรียบร้อยและใช้งานได้ดียิ่งขึ้น
หากคุณสนใจในการศึกษาและฝึกฝนพื้นฐาน CSS เพิ่มเติม หรือเรียนรู้เทคนิคการออกแบบเว็บไซต์ที่ชาญฉลาด พร้อมกับคอร์สเรียนที่ครอบคลุมทุกทักษะด้านการเขียนโปรแกรม สามารถค้นหาข้อมูลเพิ่มเติมและลงทะเบียนเรียนได้ที่ EPT (Expert-Programming-Tutor) คุณจะสามารถพัฒนาศักยภาพในการเขียนโปรแกรมและออกแบบเว็บไซต์ได้อย่างที่คุณไม่เคยนึกถึงมาก่อน!
หมายเหตุ: ข้อมูลในบทความนี้อาจจะผิด โปรดตรวจสอบความถูกต้องของบทความอีกครั้งหนึ่ง บทความนี้ไม่สามารถนำไปใช้อ้างอิงใด ๆ ได้ ทาง EPT ไม่ขอยืนยันความถูกต้อง และไม่ขอรับผิดชอบต่อความเสียหายใดที่เกิดจากบทความชุดนี้ทั้งทางทรัพย์สิน ร่างกาย หรือจิตใจของผู้อ่านและผู้เกี่ยวข้อง
หากเจอข้อผิดพลาด หรือต้องการพูดคุย ติดต่อได้ที่ https://m.me/expert.Programming.Tutor/
Tag ที่น่าสนใจ: java c# vb.net python c c++ machine_learning web database oop cloud aws ios android
หากมีข้อผิดพลาด/ต้องการพูดคุยเพิ่มเติมเกี่ยวกับบทความนี้ กรุณาแจ้งที่ http://m.me/Expert.Programming.Tutor
085-350-7540 (DTAC)
084-88-00-255 (AIS)
026-111-618
หรือทาง EMAIL: NTPRINTF@GMAIL.COM
Copyright (c) 2013 expert-programming-tutor.com. All rights reserved. | 085-350-7540 | 084-88-00-255 | ntprintf@gmail.com