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

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

ไวยากรณ์

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

ค่า

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

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

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

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

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

Результат:

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

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

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

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

Результат:

ดูเพิ่มเติม