ตามแนวคิดโมเดลกล่อง CSS ทุกองค์ประกอบบนหน้าจะเป็นกล่องสี่เหลี่ยม ขนาด ตำแหน่ง และลักษณะการทำงานของกล่องเหล่านี้ทั้งหมดสามารถควบคุมได้โดยใช้ CSS ตามพฤติกรรม ฉันหมายถึงวิธีที่มันจัดการเมื่อเนื้อหาภายในและภายนอกกล่องเปลี่ยนไป ตัวอย่างเช่น หากคุณไม่ได้กำหนดความสูงของกล่อง ความสูงของกล่องจะเพิ่มขึ้นตามความจำเป็นเพื่อรองรับเนื้อหาในกล่อง แต่จะเกิดอะไรขึ้นเมื่อคุณระบุความสูงหรือความกว้างของกล่องและเนื้อหาภายในเกินขนาดนั้น นี่คือเวลาที่จะเพิ่มคุณสมบัติ CSS overflow ซึ่งช่วยให้คุณสามารถระบุวิธีจัดการกับสถานการณ์นี้ได้
คุณสมบัติโอเวอร์โฟลว์ มีค่าสี่ค่า: มองเห็น (ค่าเริ่มต้น) ซ่อน เลื่อน และอัตโนมัติ นอกจากนี้ยังมีคุณสมบัติน้องสาวสองประการของ overflow, overflow-y และ overflow-x ซึ่งไม่ค่อยได้ใช้
มาดูค่าแต่ละค่าเหล่านี้และหารือเกี่ยวกับการใช้งานและเทคนิคทั่วไป
มองเห็นได้
หากคุณไม่ได้ตั้งค่าแอตทริบิวต์โอเวอร์โฟลว์ ค่าแอตทริบิวต์โอเวอร์โฟลว์เริ่มต้นจะปรากฏให้เห็น โดยทั่วไปแล้ว ไม่มีเหตุผลที่จะต้องตั้งค่าคุณสมบัติโอเวอร์โฟลว์ให้มองเห็นได้โดยเฉพาะ เว้นแต่คุณต้องการแทนที่ค่าที่ตั้งไว้ที่อื่น
สิ่งสำคัญที่ต้องจำไว้คือ แม้ว่าเนื้อหาที่อยู่นอกกรอบจะมองเห็นได้ แต่เนื้อหาจะไม่ส่งผลกระทบต่อเวิร์กโฟลว์ของเพจ ตัวอย่างเช่น:
โดยทั่วไป คุณไม่จำเป็นต้องตั้งค่าความสูงคงที่สำหรับกล่องที่มีเนื้อหาเป็นข้อความ ดังนั้นคุณจะไม่พบสถานการณ์เช่นนี้
ที่ซ่อนอยู่
ค่าตรงข้ามของค่าเริ่มต้นที่มองเห็นจะถูกซ่อนอยู่ มันจะซ่อนทุกอย่างไว้นอกกรอบ
สิ่งนี้มีประโยชน์มากในการจัดการกับเนื้อหาแบบไดนามิกที่อาจทำให้เกิดปัญหาเค้าโครงบางอย่างเนื่องจากเนื้อหาล้น อย่างไรก็ตาม โปรดจำไว้ว่าเนื้อหาที่ซ่อนโดยใช้วิธีนี้จะไม่ปรากฏให้เห็นเลย (เว้นแต่คุณจะดูซอร์สโค้ด) ตัวอย่างเช่น ผู้ใช้บางรายตั้งค่าแบบอักษรเริ่มต้นของเบราว์เซอร์ให้ใหญ่กว่าที่คุณคาดไว้ คุณจะดันข้อความบางส่วนออกนอกกรอบและซ่อนไว้ทั้งหมด...