word-spacing 对中文无效，因中文无空白符分隔的“词”；调汉字间距应使用 letter-spacing。它仅在空格处生效，如“登 录”，而“欢迎来到首页”被视为一词；混用二者易导致间距失控，且 CSS 无原生中文词间距支持。
word-spacing 只对“以空白符分隔的单词”起作用，中文段落基本无效；想调汉字间距，请用 letter-spacing。
为什么给中文设 word-spacing 没反应
浏览器把“词”定义为被空白符（空格、制表符、换行）包围的字符串。中文文本里没有空格，word-spacing 就找不到可操作的“词”。比如：
p { word-spacing: 10px; }
<p>欢迎来到首页</p>
这段 HTML 渲染时，整个“欢迎来到首页”被当作一个词，word-spacing 不会插入任何额外间隙。
- 只有出现空格或制表符的位置才可能生效，例如
<p>登 录</p>中的“登”和“录”之间有空格，word-spacing才会撑开它 - 中英文混排时，英文单词会被单独识别，
word-spacing: 5px可能让“Contact us”变成“Contact us”，但“联系我们”不变 - 使用
white-space: pre或word-spacing的识别逻辑——它只认原始空白符，不认实体字符
word-spacing 的合法值和常见误用
word-spacing 接受 normal、带单位的长度值（如 2px、-0.1em）、initial、inherit。其中 normal 等价于 0，不是“浏览器自定值”。
立即学习“前端免费学习笔记（深入）”；
-
word-spacing: 0和word-spacing: normal行为一致，都取消额外词间距 - 负值允许，但
word-spacing: -5px可能导致英文单词粘连，尤其在小字号下（如font-size: 12px） - 慎用
em单位：它基于当前元素的font-size计算，父容器字体变化时，词间距会意外缩放 -
word-spacing在display: inline-flex或display: grid容器中可能被对齐方式覆盖，优先级低于justify-content或gap
和 letter-spacing 混用时的实际效果
两者叠加生效，但作用对象完全不同：letter-spacing 拉开每个字符，word-spacing 只在词边界加空隙。混用容易失控：
button {
letter-spacing: 1px;
word-spacing: 4px;
}
<button>立即购买</button>
上面代码对纯中文按钮无效（无词边界），但若写成 <button>立即 购买</button>（中间有空格），结果是：“立”“即”各距 1px，“立即”与“购买”之间额外 +4px —— 实际视觉间距变成 1px + 4px + 1px = 6px，远超预期。
- 调试时可用浏览器开发者工具的“Computed”面板，逐层查看
letter-spacing和word-spacing的最终计算值 - 避免在
body或通用类（如.text）上同时设置二者，尤其当内容含数字、英文、图标字体时，易引发错位（如 Font Awesome 的<i class="fa"></i>会被letter-spacing拉变形） - 移动端 Safari 对负
letter-spacing+ 小字号组合渲染不稳定，而word-spacing影响较小——但前提是你的文本真有空格
最常被忽略的一点：你写的“中文词间距”，其实根本不存在于 CSS 规范中；浏览器没义务按汉字边界切分并加空，所以别指望 word-spacing 能替代设计稿里的“等距汉字”效果。真要实现，得用 letter-spacing + 手动包裹，或者 JS 分字后加 span 控制。
