การจัดเรียง CSS - การหลุดของเนื้อหา
- หน้าก่อนหน้า CSS z-index
- หน้าต่อไป CSS การเลื่อนน้ำหนัก
CSS overflow คุณภาพนี้ควบคุมวิธีการจัดการกับเนื้อหาที่มีขนาดใหญ่เกินไปและไม่สามารถใส่ได้ในพื้นที่ที่กำหนด
CSS Overflow
overflow คุณภาพนี้กำหนดว่าจะตัดออกเนื้อหาหรือเพิ่มเซาท์บาร์เมื่อเนื้อหาในองค์ประกอบมีขนาดใหญ่เกินไปและไม่สามารถใส่ได้ในพื้นที่ที่กำหนด
overflow คุณภาพนี้สามารถตั้งค่าค่าต่อไปนี้:
visible- โดยมาตรฐาน หลุดออกจะไม่ถูกตัดออก และเนื้อหาจะถูกวาดนอกหน้าต่างประกอบhidden- หลุดออกจะถูกตัดออก และเนื้อหาที่เหลือจะไม่เห็นscroll- หลุดออกจะถูกตัดออก และเพิ่มเซาท์บาร์เพื่อดูเนื้อหาที่เหลือauto- คล้ายกันscrollคล้ายกัน แต่เพิ่มเซาท์บาร์เมื่อมีความจำเป็นเท่านั้น
หมายเหตุ:overflow คุณภาพนี้มีผลเมื่อใช้กับองค์ประกอบบล็อคที่มีความสูงที่กำหนดไว้
หมายเหตุ:ใน OS X Lion (บน Mac) ซีเคิลบาร์ด้านล่างเป็นการซ่อนโดยมาตรฐาน และจะแสดงขึ้นเมื่อใช้งาน (แม้ว่าคุณจะตั้งค่า overflow:scroll):
overflow: visible
โดยมาตรฐาน การหลุดออกจะเห็นได้:visible) มันหมายความว่ามันจะไม่ถูกตัดออก และจะถูกวาดนอกหน้าต่างประกอบ:
ตัวอย่าง
div {
width: 200px;
height: 50px;
background-color: #eee;
overflow: visible;
}
overflow: hidden
หากคุณใช้ hidden ค่า หน้าต่างประกอบจะตัดออกเนื้อหาที่หลุดออกและซ่อนหน้าต่างประกอบที่เหลือเดินทางเหนือ:
ตัวอย่าง
div {
overflow: hidden;
}
overflow: scroll
หากคุณตั้งค่าค่าเป็น scrollเมื่อเนื้อหาหลุดออกนอกหน้าต่างประกอบ มันจะถูกตัดออกและเพิ่มเซาท์บาร์เพื่อหมุนรอบภายในหน้าต่างประกอบ โปรดระวังว่ามันจะเพิ่มเซาท์บาร์ทั้งระดับนอนระดับและตั้งแต่นอนระดับ (แม้ว่าคุณไม่จำเป็นต้องใช้มัน):
ตัวอย่าง
div {
overflow: scroll;
}
overflow: auto
auto ค่าที่เหมือนกับ scrollแต่มันจะเพิ่มเซาท์บาร์เมื่อมีความจำเป็นเท่านั้น:
ตัวอย่าง
div {
overflow: auto;
}
overflow-x และ overflow-y
overflow-x และ overflow-y คุณภาพนี้กำหนดว่าจะเปลี่ยนเนื้อหาที่หลุดออกนอกหน้าต่างประกอบ แบบนอนระดับ หรือ ตั้งแต่นอนระดับ หรือ ทั้งสองแบบ
overflow-xกำหนดว่าจะจัดการด้านซ้าย/ด้านขวาของเนื้อหาอย่างไรoverflow-yกำหนดว่าจะจัดการด้านบน/ด้านล่างของเนื้อหาอย่างไร
ตัวอย่าง
div {
overflow-x: hidden; /* ซ่อนตะกร้าหลอดนอน */
overflow-y: scroll; /* เพิ่มตะกร้าหลอดตั้ง */
}
ทั้งหมดตัวแปร overflow CSS
| คุณสมบัติ | บรรณาธิการ |
|---|---|
| overflow | กำหนดสถานการณ์ที่เกิดขึ้นเมื่อเนื้อหาที่เกินออกมาจากตำแหน่งองค์ประกอบละเอียด |
| overflow-x | กำหนดวิธีการจัดการของช่องบวกซ้าย/ขวาของเนื้อหาเมื่อเนื้อหาขององค์ประกอบละเอียดเกินออกมา |
| overflow-y | กำหนดวิธีการจัดการของช่องบวกบน/ล่างของเนื้อหาเมื่อเนื้อหาขององค์ประกอบละเอียดเกินออกมา |
- หน้าก่อนหน้า CSS z-index
- หน้าต่อไป CSS การเลื่อนน้ำหนัก
