word-spacing仅对内联元素生效，块级元素无效；纯中文无空格故基本无效；需用px/em/rem单位，禁用百分比或无单位数字；与letter-spacing叠加时按“先字距后词距”计算；Flex/Grid容器中子元素失去内联特性，word-spacing失效。
word-spacing 设置后没效果？先检查是否作用在内联元素上
word-spacing 只对内联级（inline）或可内联的元素（如 span、a、strong）生效，块级元素（如 div、p）默认不拆分单词渲染，所以加了也看不见变化。
常见错误现象：word-spacing: 10px 写在 p 标签上，但文字间距毫无反应。
- 确认目标元素的
display值不是block或flex等非内联类型；必要时手动设为display: inline或display: inline-block - 英文单词之间必须有空格才能被识别为“词”，中文无空格，
word-spacing对纯中文基本无效（浏览器不按字切分） - 如果父容器用了
white-space: nowrap，单词不会换行，但word-spacing仍起作用；若用了white-space: pre，则空格会被原样保留，可能干扰间距计算
word-spacing 的值怎么填才靠谱
word-spacing 接受长度单位（px、em、rem）和关键字 normal，不能用百分比或无单位数字。
常见错误现象：写成 word-spacing: 2 或 word-spacing: 5%，结果被浏览器忽略。
-
normal表示使用字体自带的默认词间距，等价于0（不是“重置”，而是回退到字体设计值） - 负值允许，比如
word-spacing: -2px可让英文单词挤得更紧，但过度负值会导致重叠，尤其在小字号下明显 -
em基于当前字体大小计算，比如font-size: 16px时，word-spacing: 0.5em≈8px；响应式场景中比px更可控
和 letter-spacing 混用时容易踩的坑
word-spacing 只影响词与词之间的空隙，letter-spacing 影响每个字符之间的距离。两者叠加时，浏览器是「先加字母间距，再加词间距」，不是简单相加。
常见错误现象：同时设了 letter-spacing: 1px 和 word-spacing: 4px，结果单词内部变松、单词之间却没预期那么宽。
- 中文排版慎用
letter-spacing，汉字间加空隙通常破坏阅读节奏；word-spacing对中文几乎无感，别指望靠它调标题呼吸感 - 当元素含混合内容（如英文单词 + 中文 + 符号），
word-spacing只会在连续英文+空格组合处生效，比如Hello world 中文中，“Hello” 和 “world” 之间有间距，“world” 和 “中文” 之间没有 - 某些字体（如等宽字体）自带较大词间距，
word-spacing: normal可能比0还宽，调试时建议先显式设为0作基准
Flex/Grid 容器里 word-spacing 失效的真相
在 display: flex 或 display: grid 的容器中，子元素默认变成 flex item / grid item，其内联特性被覆盖，word-spacing 不再作用于子元素内的文本流，而是整个子元素作为整体参与布局。
常见错误现象：把一段带空格的英文放进 div（display: flex），给这个 div 设 word-spacing，完全没反应。
- 解决方法：不要给 flex 容器本身设
word-spacing，改在容器内的span或p上设置 - 如果必须控制 flex item 之间的间距，用
gap或margin，别硬套word-spacing - 注意伪元素（如
::before）生成的内容不受父元素word-spacing影响，除非伪元素自身是内联且含空格文本
事情说清了就结束
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
