Cách đặt khoảng cách giữa từ (wordSpacing) trong văn bản bằng JavaScript

Thuộc tính wordSpacing tăng/giảm khoảng trắng giữa các từ trong văn bản. Giá trị: normal (mặc định), độ dài (px, em, rem...), có thể âm để rút gần các từ.

Ví dụ minh họa

Mã sau đặt word-spacing = 25px cho đoạn văn khi nhấn nút:

<!DOCTYPE html>
<html>
<body>
  <p id="pid">Đây là một đoạn văn bản ví dụ.</p>
  <button type="button" id="btn" onclick="setWordSpacing()">Đặt khoảng cách từ</button>
  <script>
    function setWordSpacing() {
      document.getElementById("pid").style.wordSpacing = "25px";
      /* Khoảng trắng giữa các từ sẽ giãn ra 25px */
    }
  </script>
</body>
</html>

Lưu ý

• Khác với letterSpacing: wordSpacing chỉ ảnh hưởng khoảng trắng giữa **từ** (tách bởi space, tab, newline). letterSpacing ảnh hưởng giữa **mỗi ký tự**.
• Giá trị âm: wordSpacing: -2px thu hẹp khoảng cách từ (hữu ích cho font chữ to).
• Kết hợp: Dùng cả wordSpacing và letterSpacing để kiểm soát typography chính xác.
• Kế thừa: Có kế thừa.

Ví dụ thực tế: Justify text đẹp hơn

p.justified-nice {
  text-align: justify;
  word-spacing: -0.5px; /* Giảm chút khoảng từ để vừa dòng đẹp hơn */
  hyphens: auto;        /* Tự động ngắt từ */
}