CSS Overflow

ของเราไม่สามารถพอดีกับองค์ประกอบได้ ข้อความควรแสดงนอกกล่องขององค์ประกอบ อย่างที่คุณเห็น ส่งผลให้มีข้อความ overflowing นอกกรอบ.

ค่าที่มองเห็นได้ล้น ในขณะที่มีประโยชน์ อาจไม่เหมาะสมเท่ากับค่าอื่นๆ สำหรับคุณสมบัติล้น เนื่องจากในกรณีส่วนใหญ่ คุณไม่ต้องการให้เนื้อหาขององค์ประกอบล้น เนื่องจากเนื้อหาที่ล้นอาจรบกวนรูปแบบอื่นๆ ที่คุณสร้างขึ้นสำหรับหน้าเว็บ

เลื่อนล้น

ค่าการเลื่อนช่วยให้คุณสามารถตัดเนื้อหาที่ล้นขององค์ประกอบเว็บได้ จากนั้น แถบเลื่อนจะถูกเพิ่มไปยังองค์ประกอบเพื่อให้ผู้ใช้สามารถดูเนื้อหาที่ล้นได้

ค่าการเลื่อนล้นจะเพิ่มทั้งแถบเลื่อนแนวตั้งและแนวนอนให้กับองค์ประกอบเว็บ แม้ว่าคุณจะไม่ต้องการแถบเลื่อนเหล่านี้ก็ตาม

สมมติว่าเรากำลังออกแบบกล่องและเราต้องการให้ข้อความที่ล้นเหลืออยู่ภายในกล่องของเรา หากมีข้อความล้น แถบเลื่อนควรปรากฏขึ้นเพื่อให้ผู้ใช้สามารถนำทางผ่านช่องต่างๆ ได้

นี่คือรหัสที่เราสามารถใช้ออกแบบกล่องของเรา:

index.html

<div>This is a box with some text. We are using this box to illustrate what happens when you use the CSS overflow property and assign it the value "scroll".</div>

styles.css

div {
	width: 200px;
	height: 100px;
	background-color: lightgray;
	overflow: scroll;
}

รหัสของเราส่งคืน:

[Code result here]


ในโค้ดของเรา เราได้สร้างกล่องที่มีความกว้าง 200px สูง 100px กล่องของเรามีสีพื้นหลังสีเทาอ่อน

นอกจากนี้ เราตั้งค่าคุณสมบัติล้นให้เท่ากับ "เลื่อน" อย่างที่คุณเห็น เนื่องจากมีข้อความมากเกินไปที่จะใส่ลงในกล่องของเรา แถบเลื่อนจึงปรากฏขึ้นและข้อความที่ล้นของเรายังคงอยู่ภายในเส้นขอบของกล่อง

น้ำล้นอัตโนมัติ

เราได้กล่าวถึงในส่วนสุดท้ายว่าคุณสมบัติการเลื่อนเพิ่มแถบเลื่อนทั้งแนวนอนและแนวตั้งให้กับองค์ประกอบเว็บ แม้ว่าจะไม่จำเป็นต้องใช้แถบเลื่อนอันใดอันหนึ่งก็ตาม

สิ่งนี้มีประโยชน์ในหลายกรณี แต่เมื่อคุณออกแบบองค์ประกอบเว็บ คุณอาจต้องการให้แถบเลื่อนที่เกี่ยวข้องปรากฏขึ้นเท่านั้น ในการดำเนินการดังกล่าว คุณสามารถใช้ค่าอัตโนมัติได้

ค่าอัตโนมัติทำงานในลักษณะเดียวกันกับค่าการเลื่อน แต่จะเพิ่มแถบเลื่อนให้กับองค์ประกอบเว็บเมื่อจำเป็นเท่านั้น สมมติว่าเรามีกล่องข้อความและเราเพียงต้องการเพิ่มแถบเลื่อนลงในกล่องเมื่อจำเป็นเท่านั้น เราสามารถทำได้โดยใช้รหัสนี้:

index.html

<div>This is a box with some text. We are using this box to illustrate what happens when you use the CSS overflow property and assign it the value "auto".</div>

styles.css

div {
	width: 200px;
	height: 100px;
	background-color: lightgray;
	overflow: auto;
}

รหัสของเราส่งคืน:

[Code result here]


ในตัวอย่างข้างต้น เราได้สร้างกล่องขนาดกว้าง 200px สูง 100px พร้อมพื้นหลังสีเทาอ่อน จากนั้นเราตั้งค่าคุณสมบัติล้นเป็นอัตโนมัติ อย่างที่คุณเห็น ในผลลัพธ์สุดท้ายของเรา มีเพียงแถบเลื่อนเดียวเท่านั้นที่แสดง เนื่องจากจำเป็นต้องใช้แถบเลื่อนเพียงแถบเดียวเพื่อแสดงเนื้อหาที่ล้นในกล่องข้อความของเรา

ซ่อนล้น

คุณอาจตัดสินใจว่าคุณต้องการให้เนื้อหาที่ล้นในองค์ประกอบถูกตัดออก จากนั้นซ่อนจากผู้ใช้ ทำได้โดยใช้ค่าโอเวอร์โฟลว์ที่ซ่อนอยู่

สมมติว่าคุณมีกล่องข้อความที่มีเนื้อหาที่คุณต้องการซ่อนหากข้อความเหล่านั้นล้นนอกองค์ประกอบ คุณสามารถใช้รหัสต่อไปนี้เพื่อสร้างกล่องนี้:

index.html

<div>This is a box with some text. We are using this box to illustrate what happens when you use the CSS overflow property and assign it the value "hidden".</div>

styles.css

div {
	width: 200px;
	height: 100px;
	background-color: lightgray;
	overflow: hidden;
}

รหัสของเราส่งคืน:

[Code result here]


ไม่เหมือนกับในตัวอย่างก่อนหน้านี้ ข้อความล้นจากกล่องของเราจะถูกซ่อนจากผู้ใช้ เนื่องจากเราตั้งค่าคุณสมบัติโอเวอร์โฟลว์เป็น hidden ในรหัสของเรา

ล้น-x และล้น-y

คุณสมบัติ overflow-x และ overflow-y ช่วยให้คุณเปลี่ยนวิธีจัดการเนื้อหาที่ล้นในแต่ละแกนแยกกันได้

คุณสมบัติ overflow-x ระบุว่าควรจัดการ overflow บนขอบด้านซ้ายและด้านขวาของกล่องอย่างไร และคุณสมบัติ overflow-y ระบุว่าควรจัดการ overflow บนขอบด้านบนและด้านล่างของกล่องอย่างไร

สมมติว่าคุณกำลังออกแบบกล่องและต้องการตั้งค่าโอเวอร์โฟลว์ที่แตกต่างกันสองค่าสำหรับแกน x และ y แกน x ควรใช้ hidden ค่าล้น และแกน y ควรใช้ scroll ค่าล้น คุณสามารถใช้รหัสต่อไปนี้เพื่อทำงานนี้ให้สำเร็จ:

index.html

<div>This is a box with some text. We are using this box to illustrate what happens when you use the CSS x-overflow and y-overflow properties to set overflow values for the individual axes in a web element.</div>

styles.css

div {
	width: 200px;
	height: 100px;
	background-color: lightgray;
	overflow-x: hidden;
	overflow-y: vertical;
}

รหัสของเราส่งคืน:

[Code result here]


อย่างที่คุณเห็น กล่องของเราไม่มีแถบเลื่อนแนวนอน เนื่องจากเราตั้งค่า overflow-x เป็น "hidden" อย่างไรก็ตาม กล่องของเรามีแถบเลื่อนแนวตั้ง ซึ่งปรากฏขึ้นเนื่องจากเราตั้งค่า overflow-y เป็น "scroll"

บทสรุป

คุณสมบัติโอเวอร์โฟลว์ CSS ระบุว่าเนื้อหาขององค์ประกอบควรปรากฏอย่างไร หากเนื้อหาขององค์ประกอบใหญ่เกินกว่าจะพอดีกับพื้นที่ที่กำหนดบนหน้าเว็บ

บทช่วยสอนนี้สำรวจโดยอ้างอิงถึงตัวอย่างบางส่วน วิธีใช้คุณสมบัติโอเวอร์โฟลว์ CSS และค่าสี่ค่าเพื่อควบคุมโอเวอร์โฟลว์ในองค์ประกอบเว็บ ตอนนี้คุณพร้อมที่จะเริ่มใช้คุณสมบัติโอเวอร์โฟลว์ CSS เหมือนนักพัฒนาผู้เชี่ยวชาญแล้ว