ตัดคำและขึ้นบรรทัดใหม่ด้วย CSS word-wrap

ใช้คุณสมบัติ word-wrap (ปัจจุบันคือ overflow-wrap) เพื่อตัดคำและขึ้นบรรทัดใหม่ ลองรันโค้ดด้านล่างเพื่อใช้งาน word-wrap ใน CSS:

ตัวอย่าง

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 200px;
        border: 2px solid #000000;
      }
      div.b {
        word-wrap: break-word;
      }
    </style>
  </head>
  <body>
    <h2>word-wrap: break-word property</h2>
    <div class="b">ThisisdemotextThisisdemotext: thisisaveryveryveryveryveryverylongword. The long word wraps to the next line.</div>
  </body>
</html>

ผลลัพธ์