Thuộc tính word-spacing trong CSS
Bùi Tấn Lực - 919
- 01/10/2025
Chức năng của Thuộc tính word-spacing trong CSS
Thuộc tính word-spacing trong CSS dùng để canh chỉnh khoảng cách giữa các từ trong một văn bản của phần tử HTML, bạn dùng px, em để quy định khoảng cách hoặc dùng normal để sử dụng khoảng cách mặc định của trình duyệt.
Cú pháp của Thuộc tính word-spacing trong CSS
word-spacing: giatri;
giatri: Giá trị để canh chỉnh khoảng cách giữa các từ trong một văn bản của phần tử HTML (Ví dụ: normal, 5px, 10px, 1em,....)
Các giá trị của Thuộc tính word-spacing trong CSS
normal: Sử dụng khoảng cách mặc định của trình duyệt.
Khoảng cách cụ thể: Một giá trị cụ thể, ví dụ 10px, 50px, 5em. Giá trị âm cũng được phép.
initial: Đặt lại thuộc tính về giá trị mặc định của nó.
inherit: Kế thừa giá trị của thuộc tính word-spacing từ phần tử cha.
Code Thuộc tính word-spacing trong CSS
word-spacing: normal;
word-spacing: 5px;
word-spacing: 1em;
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính word-spacing trong CSS</title>
</head>
<body>
<h1>Code Thuộc tính word-spacing trong CSS</h1>
<p>Dùng để canh chỉnh khoảng cách giữa các từ trong một văn bản của phần tử HTML, bạn dùng px, em để quy định khoảng cách hoặc dùng normal để sử dụng khoảng cách mặc định của trình duyệt:</p>
<p style="word-spacing: normal">Thuộc tính word-spacing: normal trong CSS</p>
<p style="word-spacing: 5px">Thuộc tính word-spacing: 5px trong CSS</p>
<p style="word-spacing: 50px">Thuộc tính word-spacing: 50px trong CSS</p>
<p style="word-spacing: 1em">Thuộc tính word-spacing: 1em trong CSS</p>
</body>
</html>
Cách sử dụng word-spacing hiệu quả trong CSS
word-spacing nên được sử dụng để tinh chỉnh khoảng cách giữa các từ khi cách hiển thị mặc định chưa phù hợp với thiết kế. Thay vì tăng khoảng cách quá nhiều để tạo cảm giác thoáng, nên điều chỉnh ở mức vừa phải để văn bản vẫn dễ đọc trên cả máy tính và thiết bị di động.
Khi nào nên tăng hoặc giảm khoảng cách giữa các từ?
Có thể tăng word-spacing khi phần văn bản bị dày, đặc biệt ở những khu vực có kích thước chữ nhỏ hoặc chiều rộng nội dung hạn chế. Khoảng cách được nới rộng hợp lý giúp mắt phân biệt các từ nhanh hơn và tạo cảm giác thoáng cho đoạn văn.
Ngược lại, nên giảm giá trị khi các từ bị tách quá xa nhau khiến dòng chữ thiếu liền mạch. Điều này thường dễ nhận thấy ở tiêu đề, nút điều hướng hoặc những thành phần có chiều rộng cố định.
Không nên xem word-spacing là cách sửa mọi vấn đề về bố cục chữ. Nếu văn bản xuống dòng bất hợp lý, trước tiên nên kiểm tra kích thước chữ, chiều rộng phần tử và các thuộc tính liên quan đến kiểu chữ.
word-spacing ảnh hưởng thế nào đến khả năng đọc văn bản?
Khoảng cách giữa các từ tác động trực tiếp đến nhịp đọc. Khi khoảng cách quá nhỏ, nhiều từ có thể tạo thành một khối chữ khó quan sát. Khi khoảng cách quá lớn, mắt phải di chuyển xa hơn giữa các từ và người đọc có thể cảm thấy nội dung bị rời rạc.
Vì vậy, giá trị phù hợp cần dựa trên font chữ, kích thước chữ, độ dài dòng và thiết bị hiển thị. Một thiết lập nhìn đẹp trên màn hình lớn chưa chắc mang lại trải nghiệm tương tự trên màn hình điện thoại.
Đối với nội dung dài như bài viết, nên ưu tiên sự ổn định và dễ đọc thay vì tạo hiệu ứng thị giác quá rõ ràng. Với tiêu đề hoặc thành phần giao diện ngắn, có thể điều chỉnh linh hoạt hơn để phù hợp với phong cách thiết kế.
Kết hợp word-spacing với các thuộc tính CSS khác
word-spacing thường phát huy hiệu quả tốt hơn khi được sử dụng cùng các thuộc tính định dạng văn bản khác. Chẳng hạn, letter-spacing điều chỉnh khoảng cách giữa từng ký tự, còn line-height kiểm soát khoảng cách giữa các dòng.
Có thể kết hợp các thuộc tính này để tạo một hệ thống chữ cân đối, nhưng không nên thay đổi đồng thời quá nhiều giá trị nếu chưa kiểm tra kết quả. Một khoảng cách từ giữa các từ hợp lý vẫn cần đi cùng kích thước chữ và chiều cao dòng phù hợp.
.content {
font-size: 16px;
line-height: 1.7;
word-spacing: 2px;
letter-spacing: 0.1px;
}
Cách tiếp cận tốt là điều chỉnh từng thuộc tính một, sau đó kiểm tra trên nhiều kích thước màn hình. Nhờ vậy, word-spacing chỉ đảm nhiệm đúng vai trò của nó mà không làm ảnh hưởng không cần thiết đến toàn bộ bố cục văn bản.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính word-spacing trong CSS.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
