CSS word-spacing: Khoảng cách giữa các từ

Thuộc tính CSS word-spacing được dùng để chỉ định khoảng cách giữa các từ của một phần tử.

Cú pháp

selector {
    word-spacing: normal | /* length */;
}

Giá trị: normal (mặc định, ~0.25em), hoặc độ dài cụ thể (px, em, rem, %). Giá trị âm được phép (thu hẹp khoảng cách).

Ví dụ 1: Tăng khoảng cách từ

<!DOCTYPE html>
<html>
<head>
<style>
div {
    display: flex; float: left; padding: 10px;
    background-color: salmon;
}
div > div {
    word-spacing: 30px;
    width: 340px; height: 140px;
    border-radius: 5%;
    box-shadow: inset 0 0 15px blueviolet;
}
</style>
</head>
<body>
<div>
    <div>
        Magento là phần mềm thương mại điện tử mã nguồn mở, được tạo bởi Varien Inc.,
        hữu ích cho kinh doanh trực tuyến. Nó có kiến trúc mô-đun linh hoạt
        và có khả năng mở rộng với nhiều tùy chọn kiểm soát hữu ích cho người dùng.
    </div>
</div>
</body>
</html>

Ví dụ 2: Khoảng cách rất lớn (6em)

<!DOCTYPE html>
<html>
<head>
<style>
q {
    display: flex; padding: 10px;
    word-spacing: 6em;
    background-color: orange;
    font-size: 1.2em;
}
</style>
</head>
<body>
<h2>What is Java?</h2>
According to Java's official documentation, <hr>
<q cite="https://www.java.com/en/download/faq/whatis_java.xml">
    Java is a programming language and computing platform first released by Sun Microsystems in 1995.
</q>
</body>
</html>

word-spacing vs letter-spacing

Lưu ý

• Chỉ ảnh hưởng đến khoảng trắng giữa từ (U+0020), không ảnh hưởng tab, newline
• Giá trị em tương đối với font-size của phần tử — hữu ích cho responsive
• Giá trị âm có thể dùng cho heading in hoa: word-spacing: -0.1em; letter-spacing: 0.05em;
• Kết hợp với text-align: justify — trình duyệt sẽ điều chỉnh word-spacing để căn đều

Ứng dụng thực tế

/ * Đọc dễ dàng cho văn bản dài */
.article-body { word-spacing: 0.05em; line-height: 1.7; }

/ * Heading in hoa */
h1 { text-transform: uppercase; letter-spacing: 0.08em; word-spacing: 0.15em; }

/ * Button/compact UI */
.btn { word-spacing: -0.05em; letter-spacing: 0.02em; }