คุณสมบัติ overflow-wrap

คุณสมบัติ overflow-wrap อนุญาตให้ตัดตัวอักษรของคำยาวไปยังบรรทัดใหม่ได้ หากคำนั้นไม่พอดีกับความกว้างของคอนเทนเนอร์

ไวยากรณ์

เซเลกเตอร์ {
	overflow-wrap: break-word | normal;
}

ค่า	คำอธิบาย
`break-word`	บังคับให้คำยาวถูกตัดไปบรรทัดใหม่ หากคำนั้นไม่พอดีในคอนเทนเนอร์ โดยที่คำจะเริ่มต้นในบรรทัดใหม่
`normal`	พฤติกรรมมาตรฐาน: หากคำยาวไม่พอดีกับความกว้างของคอนเทนเนอร์ มันจะยื่นออกมานอกขอบเขต (โดยจะเริ่มต้นในบรรทัดใหม่)

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

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

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

#elem {
	word-wrap: normal;
	overflow-wrap: normal;
	border: 1px solid red;
	width: 200px;
}

ส่วนนี้ ตัวอักษรที่เคยไม่พอดีจะถูกตัดไปบรรทัดถัดไป (โดยที่คำยาวยังคงเริ่มต้นในบรรทัดใหม่):

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

#elem {
	overflow-wrap: break-word;
	border: 1px solid red;
	width: 200px;
}