Cách đặt quy tắc ngắt dòng cho script non-CJK (wordBreak) bằng JavaScript

Thuộc tính wordBreak kiểm soát cách ngắt dòng cho các script **không phải CJK** (Chinese, Japanese, Korean). Giá trị: normal (mặc định), break-all (ngắt ở bất kỳ ký tự nào), keep-all (không ngắt CJK), break-word (ngắt từ dài - deprecated, dùng overflow-wrap).

Ví dụ minh họa

Mã sau bật break-all cho div宽度固定, khiến văn bản liền mạch ngắt xuống dòng khi nhấn nút:

<!DOCTYPE html>
<html>
<head>
  <style>
    #box {
      width: 150px;
      height: 120px;
      background-color: lightblue;
      border: 1px solid black;
      padding: 10px;
    }
  </style>
</head>
<body>
  <button onclick="setWordBreak()">Đặt word-break = break-all</button>
  <div id="box">
    ĐâyLàVănBảnDemoKhôngCóKhoảngTrắngĐểTestWordBreakĐâyLàVănBảnDemoKhôngCóKhoảngTrắngĐểTestWordBreak
  </div>
  <script>
    function setWordBreak() {
      document.getElementById("box").style.wordBreak = "break-all";
      /* Văn bản dài không space sẽ bị ngắt mạnh ở bất kỳ ký tự nào để vừa hộp */
    }
  </script>
</body>
</html>

Các giá trị wordBreak

wordBreak vs overflowWrap (wordWrap)

Khuyến nghị: Dùng overflow-wrap: break-word (tên cũ: wordWrap) cho văn bản thường. Chỉ dùng wordBreak: break-all khi thực sự cần ngắt ký tự đơn lẻ.