คุณสมบัติ overflow

คุณสมบัติ overflow กำหนดให้เบราว์เซอร์ทราบ วิธีการจัดการกับเนื้อหา (ข้อความ รูปภาพ บล็อกอื่นๆ) ที่ล้นออกนอกขอบเขต ของบล็อก (เกินความกว้างหรือความสูง) เบราว์เซอร์ สามารถซ่อนส่วนที่ล้นออกมา เพิ่มแถบ เลื่อน หรือไม่ทำอะไรเลย (ปล่อยไว้ ตามเดิม - ให้ล้นออกนอกขอบเขต)

ไวยากรณ์

ตัวเลือก {
	overflow: hidden | scroll | auto | visible;
}

ค่า

ค่า	คำอธิบาย
`hidden`	ซ่อนเนื้อหาที่ล้นออกนอกขอบเขตบล็อก
`scroll`	เพิ่มแถบเลื่อน และจะเพิ่มเสมอ แม้ว่าไม่มีอะไรล้นออกมา (ในกรณีนี้แถบเลื่อนจะไม่ทำงาน)
`auto`	เพิ่มแถบเลื่อนเมื่อจำเป็น: หากเนื้อหาไม่ พอดี - พวกมันจะปรากฏขึ้น หากพอดีทั้งหมด - จะไม่มีพวกมัน
`visible`	ไม่ซ่อนเนื้อหาที่ล้นออกนอกขอบเขตบล็อก

ค่าเริ่มต้น: visible

ตัวอย่าง . ค่า visible

ในตัวอย่างนี้ คำที่ยาวมากจะไม่พอดี ภายในคอนเทนเนอร์และจะล้นออกนอกขอบเขตของมัน ไม่มีการตัด เกิดขึ้น:

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

#elem {
	overflow: visible;
	border: 1px solid red;
	width: 200px;
}

ตัวอย่าง . ค่า visible

และตอนนี้ไม่เพียงแต่ความกว้างถูกจำกัด แต่ ความสูงก็ถูกจำกัดด้วย (ข้อความจะล้นออกนอกบล็อกทั้งทางความสูง):

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

#elem {
	width: 200px;
	height: 40px;
	overflow: visible;
	border: 1px solid red;
	margin-bottom: 20px;
}

ตัวอย่าง . ค่า hidden

ตอนนี้ทุกอย่างที่ล้นออกนอกขอบเขตคอนเทนเนอร์ จะถูกตัดออกไปอย่างง่ายดาย (ทั้งทางความสูงด้วย) โปรดสังเกต ว่าการตัดทางความสูงเกิดขึ้น เฉพาะเมื่อกำหนดความสูงไว้ชัดเจนเท่านั้น มิฉะนั้น ข้อความจะขยายคอนเทนเนอร์ทาง ความสูง - และจะไม่มีการตัดใดๆ เกิดขึ้น:

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

#elem {
	overflow: hidden;
	width: 200px;
	height: 40px;
	border: 1px solid red;
}

ตัวอย่าง . ค่า scroll

ด้วยค่า scroll แถบเลื่อน จะปรากฏเสมอ แม้ว่าจะไม่มีอะไรล้นออกมา (ในกรณีนี้พวกมันจะไม่ทำงาน) ตอนนี้ ข้อความไม่ล้นออกมาทั้งทางความกว้างและความสูง แต่แถบเลื่อนยังคงมีอยู่ (ไม่ทำงาน):

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

#elem {
	overflow: scroll;
	width: 400px;
	height: 100px;
	border: 1px solid red;
}

ตัวอย่าง . ค่า auto

ด้วยค่า auto แถบเลื่อน จะถูกเพิ่มเฉพาะเมื่อเนื้อหาล้นออกมา นอกคอนเทนเนอร์ ตอนนี้ยังไม่มีพวกมัน เนื่องจากทุกอย่าง พอดี:

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

#elem {
	overflow: auto;
	width: 400px;
	height: 100px;
	border: 1px solid red;
}

ตัวอย่าง . ค่า auto

และตอนนี้จำกัดความกว้าง - แถบเลื่อนแนวนอน จะปรากฏขึ้น:

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

#elem {
	width: 200px;
	overflow: auto;
	height: 100px;
	border: 1px solid red;
}

ดูเพิ่มเติม

คุณสมบัติ word-break,
ที่แบ่งตัวอักษรของคำยาวไปยังบรรทัดใหม่
คุณสมบัติ overflow-wrap,
ที่แบ่งตัวอักษรของคำยาวไปยังบรรทัดใหม่
คุณสมบัติ overflow-x,
ที่ตัดส่วนที่ล้นออกมาทางแนวนอน
คุณสมบัติ overflow-y,
ที่ตัดส่วนที่ล้นออกมาทางแนวตั้ง