บทความนี้สาธิตวิธีหยุดเนื้อหาไม่ให้ล้นและเปิดใช้งานการเลื่อนโดยใช้ CSS
จะหยุดเนื้อหาล้นและเปิดใช้งานการเลื่อนได้อย่างไร
จุดประสงค์เพื่อหยุดเนื้อหาจากการล้นคือเนื้อหานั้นพอดีกับคอนเทนเนอร์และไม่ส่งผลเสียต่อประสิทธิภาพของเว็บไซต์ สามารถเข้าใจบริบทได้อย่างง่ายดายและสามารถปรับปรุงการเข้าถึงของผู้ใช้ สำหรับคำอธิบายโดยละเอียด ให้เราพูดคุยผ่านตัวอย่าง:
ขั้นตอนที่ 1: เปิดใช้งานการเลื่อนด้วยเนื้อหาล้น
เริ่มแรก ให้เริ่มด้วยการสร้างตารางภายในไฟล์ HTML ซึ่งจะใช้เอฟเฟกต์การเลื่อน สมมติว่าตารางถูกสร้างขึ้นแล้ว และประกอบด้วยหกแถวและเจ็ดคอลัมน์ และมีการจัดเตรียมข้อมูลจำลองไว้ในตาราง:
< โต๊ะ >
< ท >
< ไทย > หัวหน้า 1 < / ไทย >
< ไทย > หัวหน้า 2 < / ไทย >
< ไทย > หัวหน้า 3 < / ไทย >
< ไทย > หัวหน้า 4 < / ไทย >
< ไทย > หัวหน้า 5 < / ไทย >
< ไทย > หัวหน้า 6 < / ไทย >
< ไทย > หัวหน้า 7 < / ไทย >
< / ท >
< ท >
< td > แถวที่ 1 < / td >
< td > แถวที่ 1 < / td >
< td > แถวที่ 1 < / td >
< td > แถวที่ 1 < / td >
< td > แถวที่ 1 < / td >
< td > แถวที่ 1 < / td >
< td > แถวที่ 1 < / td >
< / ท >
< ท >
< td > แถวที่ 2 < / td >
< td > แถวที่ 2 < / td >
< td > แถวที่ 2 < / td >
< td > แถวที่ 2 < / td >
< td > แถวที่ 2 < / td >
< td > แถวที่ 2 < / td >
< td > แถวที่ 2 < / td >
< / ท >
< ท >
< td > แถวที่ 3 < / td >
< td > แถวที่ 3 < / td >
< td > แถวที่ 3 < / td >
< td > แถวที่ 3 < / td >
< td > แถวที่ 3 < / td >
< td > แถวที่ 3 < / td >
< td > แถวที่ 3 < / td >
< / ท >
< ท >
< td > แถวที่ 4 < / td >
< td > แถวที่ 4 < / td >
< td > แถวที่ 4 < / td >
< td > แถวที่ 4 < / td >
< td > แถวที่ 4 < / td >
< td > แถวที่ 4 < / td >
< td > แถวที่ 4 < / td >
< / ท >< ท >
< td > แถวที่ 5 < / td >
< td > แถวที่ 5 < / td >
< td > แถวที่ 5 < / td >
< td > แถวที่ 5 < / td >
< td > แถวที่ 5 < / td >
< td > แถวที่ 5 < / td >
< td > แถวที่ 5 < / td >
< / ท >
< ท >
< td > แถวที่ 6 < / td >
< td > แถวที่ 6 < / td >
< td > แถวที่ 6 < / td >
< td > แถวที่ 6 < / td >
< td > แถวที่ 6 < / td >
< td > แถวที่ 6 < / td >
< td > แถวที่ 6 < / td >
< / ท >
< / โต๊ะ >
หลังจากดำเนินการตามส่วนย่อยของโค้ดข้างต้น หน้าเว็บจะปรากฏดังนี้:
เอาต์พุตแสดงว่าข้อมูลตารางอยู่ในรูปแบบที่อ่านได้น้อย และตารางได้รับพื้นที่จำนวนมาก
ขั้นตอนที่ 2: ตั้งค่าโอเวอร์โฟลว์และเอฟเฟกต์การเลื่อน ในข้อมูลโค้ดด้านบน: หลังจากดำเนินการตามส่วนย่อยของโค้ดข้างต้น หน้าเว็บจะปรากฏดังนี้: หน้าเว็บแสดงให้เห็นว่าตอนนี้ตารางใช้พื้นที่น้อยลงและหยุดเนื้อหาจากการล้น นอกจากนี้ยังเปิดใช้งานเอฟเฟกต์การเลื่อน บันทึก : โดยตั้งค่า “ ล้น: อัตโนมัติ ' หรือ ' ล้น: เลื่อน ” ผู้ใช้สามารถเปิดใช้งานการเลื่อนสำหรับเนื้อหาที่ล้น นอกจากนี้ “ ล้น: ซ่อนอยู่ ” สามารถใช้เพื่อป้องกันน้ำล้นได้ทั้งหมด คุณสมบัติ 'โอเวอร์โฟลว์-x' และ 'โอเวอร์โฟลว์-y' ใช้เพื่อควบคุมโอเวอร์โฟลว์และเปิดใช้งานการเลื่อนที่แกนนอนและแนวตั้ง ช่วยป้องกันไม่ให้เนื้อหาล้นและเปิดใช้งานการเลื่อนเพื่อสร้างการออกแบบที่ตอบสนองแบบโต้ตอบสำหรับอุปกรณ์ทั้งหมด บทความนี้แสดงวิธีหยุดเนื้อหาไม่ให้ล้นและเปิดใช้งานการเลื่อนโดยใช้ CSS
หลังจากนั้นให้ห่อโต๊ะด้วยผู้ปกครอง”
.ล้น {
ความกว้าง : 200px ;
ความสูง : 200px ;
ล้น-x : อัตโนมัติ ;
ล้น-y : อัตโนมัติ ;
พฤติกรรมการเลื่อน : เรียบ ;
}
บทสรุป