คุณรู้วิธีใช้แอตทริบิวต์โอเวอร์โฟลว์ CSS หรือไม่ มาแนะนำให้คุณรู้จักโดยละเอียด! เราได้สั่งสมประสบการณ์มาบ้างและอยากจะแบ่งปันกับคุณ โปรดแก้ไขกันด้วย
ค่าคุณสมบัติ CSS ล้น :
1. มองเห็นได้: ค่าเริ่มต้น เนื้อหาจะไม่ถูกตัดแต่งและจะถูกนำเสนอนอกกล่ององค์ประกอบ
2. ซ่อน: เนื้อหาจะถูกตัดออกและเนื้อหาที่เหลือจะมองไม่เห็น
3. เลื่อน: เนื้อหาจะถูกตัดออก แต่เบราว์เซอร์จะแสดงแถบเลื่อนเพื่อดูเนื้อหาที่เหลือ
4. อัตโนมัติ: หากเนื้อหาถูกตัดแต่ง เบราว์เซอร์จะแสดงแถบเลื่อนเพื่อดูเนื้อหาที่เหลือ
นอกจากนี้ยังมีคุณสมบัติน้องสาวสองประการของ overflow, overflow-y และ overflow-x ซึ่งไม่ค่อยได้ใช้ มา ดูค่าแต่ละค่าเหล่านี้และหารือเกี่ยวกับการใช้งานและเทคนิคทั่วไป
(1) อัตโนมัติ
ค่าอัตโนมัติของโอเวอร์โฟลว์นั้นคล้ายกับการเลื่อนมาก สิ่งเดียวที่แก้ไขได้คือ ปัญหาของแถบเลื่อนที่ปรากฏขึ้นเมื่อคุณไม่ต้องการมัน
(2) ซ่อนเร้น
ค่าตรงข้ามของค่าเริ่มต้นที่มองเห็นจะถูกซ่อนอยู่ มันจะ ซ่อนทุกอย่างไว้นอกกรอบ สิ่งนี้มีประโยชน์มากในการจัดการกับเนื้อหาแบบไดนามิกที่อาจทำให้เกิด ปัญหาเค้าโครงบางอย่างเนื่องจากเนื้อหาล้น อย่างไรก็ตาม โปรดจำไว้ว่าเนื้อหาที่ซ่อนโดยใช้วิธีนี้จะ ไม่ปรากฏให้เห็นเลย (เว้นแต่คุณจะดูซอร์สโค้ด) ตัวอย่างเช่น หากผู้ใช้บางรายตั้งค่าแบบอักษรเริ่มต้นของเบราว์เซอร์ ให้ใหญ่กว่าที่คุณต้องการ คุณจะผลักข้อความบางส่วนออกนอกกรอบและซ่อนไว้ทั้งหมด
(3) มองเห็นได้
หากคุณไม่ได้ตั้งค่าแอตทริบิวต์โอเวอร์โฟลว์ ค่าแอตทริบิวต์โอเวอร์โฟลว์เริ่มต้นจะปรากฏให้เห็น โดยทั่วไปแล้ว ไม่มีเหตุผลที่จะต้องตั้งค่าคุณสมบัติโอเวอร์โฟลว์ให้มองเห็นได้โดยเฉพาะ เว้นแต่คุณต้องการ แทนที่ ค่าที่ตั้งไว้ที่อื่น สิ่งสำคัญที่ต้องจำไว้คือ แม้ว่า เนื้อหาที่อยู่นอกกรอบจะมองเห็นได้ แต่เนื้อหาจะไม่ส่งผลกระทบต่อเวิร์กโฟลว์ของเพจ โดยทั่วไป คุณไม่จำเป็น ต้องตั้งค่าความสูงคงที่สำหรับกล่องที่มีเนื้อหาเป็นข้อความ ดังนั้นคุณจะไม่พบสถานการณ์เช่นนี้
(4)เลื่อน
การตั้งค่าโอเวอร์โฟลว์ของกล่องเพื่อเลื่อนจะซ่อนเนื้อหาที่แสดงผลนอกกล่อง แต่จะมีแถบเลื่อนสำหรับการเลื่อนภายในกล่องเพื่อให้สามารถดูเนื้อหาที่เหลือได้ เป็นที่ น่า สังเกตว่าการใช้การเลื่อนจะสร้างแถบเลื่อนทั้งแนวนอนและแนวตั้งในเวลาเดียวกัน แม้ว่าเนื้อหานั้น จะต้องการเพียงแถบใดแถบหนึ่งก็ตาม
ตัวอย่าง: การใช้ค่าแอตทริบิวต์ที่มองเห็นและซ่อน
<!DOCTYPEhtml><html><head><style>div{width:550px;height:100px;margin-top:20px;border:1pxsolidred;}div.hidden{overflow:hidden;}div.scroll{overflow:scroll ;}div.auto{overflow:auto;}</style></head><body><divclass=hidden>visible: ค่าเริ่มต้น เนื้อหาที่ล้นจะไม่ได้รับการประมวลผล และเนื้อหาจะถูกแสดงนอกพื้นที่เนื้อหาองค์ประกอบ ; <br>ซ่อน: ซ่อนเนื้อหาของพื้นที่เนื้อหาองค์ประกอบล้น <br>เลื่อน: ซ่อนเนื้อหาของพื้นที่เนื้อหาองค์ประกอบล้น และสร้างแถบเลื่อนทางด้านซ้ายและด้านล่างขององค์ประกอบ องค์ประกอบในองค์ประกอบโดยการเลื่อนแถบเลื่อน Content;<br>auto: หากเนื้อหาล้น แถบเลื่อนจะถูกสร้างขึ้นที่ด้านซ้ายขององค์ประกอบ คุณสามารถดูเนื้อหาทั้งหมดในองค์ประกอบได้โดยการเลื่อนแถบเลื่อน ;<br>สืบทอด: สืบทอดค่าของแอตทริบิวต์โอเวอร์โฟลว์จากองค์ประกอบหลัก </div><divclass=scroll>visible: ค่าเริ่มต้น เนื้อหาที่ล้นจะไม่ได้รับการประมวลผล และเนื้อหาจะถูกแสดงนอกพื้นที่เนื้อหาองค์ประกอบ<br>ซ่อน: ซ่อนเนื้อหาของพื้นที่เนื้อหาองค์ประกอบล้น;<br >เลื่อน: ซ่อนเนื้อหาในพื้นที่เนื้อหาขององค์ประกอบล้น และสร้างแถบเลื่อนทางด้านซ้ายและด้านล่างขององค์ประกอบ คุณสามารถดูเนื้อหาทั้งหมดในองค์ประกอบได้โดยการเลื่อนแถบเลื่อน<br> อัตโนมัติ: หากเนื้อหาล้นเกิดขึ้น เนื้อหาจะอยู่ทางด้านซ้ายขององค์ประกอบ สร้างแถบเลื่อน และคุณสามารถดูเนื้อหาทั้งหมดในองค์ประกอบได้โดยการเลื่อนแถบเลื่อน <br>สืบทอด: สืบทอดค่าของโอเวอร์โฟลว์ คุณลักษณะจากองค์ประกอบหลัก </div><divclass=auto>visible: ค่าเริ่มต้น เนื้อหาที่ล้นจะไม่ถูกประมวลผล และเนื้อหาจะถูกแสดงนอกพื้นที่เนื้อหาองค์ประกอบ<br>ซ่อน: ซ่อนเนื้อหาของพื้นที่เนื้อหาองค์ประกอบล้น;<br >เลื่อน: ซ่อนเนื้อหาในพื้นที่เนื้อหาขององค์ประกอบล้น และสร้างแถบเลื่อนทางด้านซ้ายและด้านล่างขององค์ประกอบ คุณสามารถดูเนื้อหาทั้งหมดในองค์ประกอบได้โดยการเลื่อนแถบเลื่อน<br> อัตโนมัติ: หากเนื้อหาล้นเกิดขึ้น เนื้อหาจะอยู่ทางด้านซ้ายขององค์ประกอบ สร้างแถบเลื่อน และคุณสามารถดูเนื้อหาทั้งหมดในองค์ประกอบได้โดยการเลื่อนแถบเลื่อน <br>สืบทอด: สืบทอดค่าของโอเวอร์โฟลว์ คุณลักษณะจากองค์ประกอบหลัก </div></body></html>ผลการวิ่ง:
