Thuộc tính wordBreak quy định quy tắc ngắt dòng cho các chữ không phải CJK (Trung, Nhật, Hàn).
Cú pháp
object.style.wordBreak = "value"
Giá trị
| Giá trị | Mô tả |
|---|---|
| initial | Mặc định. |
| inherit | Kế thừa. |
| normal | Ngắt theo quy tắc thông thường. |
| keep-all | Không ngắt giữa cặp chữ cái (dành cho CJK). |
| break-all | Cho phép ngắt giữa bất kỳ hai chữ cái nào. |
Ví dụ: Ngắt từ dài không có khoảng trắng
<!DOCTYPE html>
<html>
<head>
<style>
p { border: 2px solid #fff; width: 120px; }
.btn { background: #db133a; color: #fff; border: none; padding: 0.5rem 1rem; cursor: pointer; }
</style>
</head>
<body>
<h1>DOM Style wordBreak Property</h1>
<p>Thisisaparagraphelement.</p>
<button onclick="add()" class="btn">Set wordBreak</button>
<script>
function add() {
document.querySelector('p').style.wordBreak = "break-all";
}
</script>
</body>
</html>
Văn bản không có khoảng trắng sẽ bị ngắt dòng tại bất kỳ vị trí nào khi bật break-all.