คุณสมบัติ word-break

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

ไวยากรณ์

ตัวเลือก {
	word-break: break-all | keep-all | normal;
}

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

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

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

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

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

แต่ตอนนี้ ตัวอักษรที่ไม่พอดี จะถูกแบ่งไปยังบรรทัดถัดไป:

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

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

คุณสมบัติ overflow-wrap,
ซึ่งอนุญาตให้แบ่งตัวอักษรของคำยาวไปยังบรรทัดใหม่ได้เช่นกัน
คุณสมบัติ hyphens,
ซึ่งเปิดใช้งานการแบ่งคำตามพยางค์
คุณสมบัติ overflow,
ซึ่งตัดส่วนที่ยื่นออกไปนอกขอบเขตของบล็อก
แท็ก wbr,
ซึ่งทำให้เกิดการแบ่งบรรทัดแบบนิ่มด้วยวิธี HTML
แท็ก br,
ซึ่งสามารถใช้บังคับให้ข้อความขึ้นบรรทัดใหม่