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

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

ไวยากรณ์

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

ค่า

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

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

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

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

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

Результат:

ตัวอย่าง . ค่า break-all

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

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

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

Результат:

ดูเพิ่มเติม