Các word-spacingbất động sản tương tự letter-spacing, mặc dù tự nhiên việc sử dụng nó điều chỉnh lượng không gian giữa các từ trong một đoạn văn bản, không phải là đặc điểm cá nhân.
p ( word-spacing: 2em; )word-spacing có thể nhận ba giá trị khác nhau:
- từ khóa "bình thường", đặt lại khoảng cách mặc định
- giá trị độ dài sử dụng bất kỳ đơn vị CSS nào (phổ biến nhất là px, em, rem)
- từ khóa "kế thừa", áp dụng
word-spacingphần tử mẹ
Thực hành tốt nhất tại thời điểm này là sử dụng em. Kích thước phông chữ có thể được điều chỉnh, vì vậy việc sử dụng pixel cho điều này có thể gây ra vấn đề khoảng cách giữa các từ sẽ không mở rộng như kích thước của chúng. remthường là tuyệt vời, nhưng hỗ trợ trình duyệt thấp hơn và trong trường hợp sử dụng này, tốt nhất là khoảng cách có liên quan trực tiếp đến các từ mà nó đang được áp dụng, không phải gốc.
Điều quan trọng cần lưu ý là "từ" trong ngữ cảnh này thực sự đề cập đến một phần nội dung nội tuyến số ít - có nghĩa là word-spacingảnh hưởng đến inline-blockcác yếu tố cũng như inlinecác yếu tố. Trong ví dụ này, một số phần tử như vậy được đặt cách nhau bằng cách đặt vùng word-spacingchứa mẹ của chúng:
Điểm quan tâm
- Các
word-spacingtài sản là animatable với CSS Transitions. - Mặc dù việc sử dụng giá trị “phần trăm” để xác định khoảng cách được cho phép theo thông số kỹ thuật, nó có thể mang lại kết quả không thể đoán trước - thường đơn giản là không có tác dụng gì.
- Đặt khoảng trắng thành 0 là một trong những cách để chống lại khoảng cách giữa các phần tử khối nội tuyến.
Hỗ trợ trình duyệt
| Trình duyệt Chrome | Safari | Firefox | Opera | I E | Android | iOS |
|---|---|---|---|---|---|---|
| Làm | Làm | Làm | Làm | Làm | Phần lớn | Làm |
Lưu ý về hỗ trợ trình duyệt Android: Phần lớn các thiết bị Android hỗ trợ word-spacing-hover, một số thiết bị sử dụng các bản dựng Webkit không phải của Apple hoặc trình duyệt Netfront thì không. Các chi tiết cụ thể được trình bày chi tiết trong liên kết QuirksMode ở trên.