ตัดบรรทัดตามคำด้วย CSS word-break

ใช้คุณสมบัติ word-break เพื่อตัดบรรทัดตามคำด้วย CSS ลองรันโค้ดด้านล่างเพื่อใช้งาน word-break ใน CSS:

ตัวอย่าง

<html>
  <head>
    <style>
      p.text1 {
        width: 140px;
        border: 1px solid #000000;
        word-break: keep-all;
      }
      p.text2 {
        width: 140px;
        border: 1px solid #000000;
        word-break: break-all;
      }
    </style>
  </head>
  <body>
    <b>Line break at hyphens:</b>
    <p class="text1">Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p>
    <b>Line break at any character:</b>
    <p class="text2">Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p>
  </body>
</html>

ผลลัพธ์