word-spacing 为什么设了没反应
常见现象是写了 word-spacing: 20px，但中文段落完全没变化，英文也只在空格处生效。根本原因是：它只作用于「单词之间的空白」，而中文词间本无空格，浏览器不识别“词”，只认空格、制表符、换行符这些分隔符。
实操建议：
- 对中英文混排，
word-spacing只影响英文单词之间（比如 “Hello World” 中的空格），不影响 “你好 world” 里“你好”和“world”之间的距离 - 想控制中文字与字之间的距离，该用
letter-spacing，不是word-spacing - 如果文本由 JavaScript 动态插入且含多余空格（如多个连续空格），要确认是否被 HTML 自动合并——
white-space: pre-wrap可保留空格，否则word-spacing无处可作用
word-spacing 的合法值和行为边界
word-spacing 接受长度值（px、em、rem）或关键字 normal，但它不是简单地“加”固定像素，而是「调整空白字符的渲染宽度」。
关键细节：
立即学习“前端免费学习笔记（深入）”；
-
word-spacing: normal并非“0”，而是浏览器默认的空白宽度（通常约0.25em） - 设为负值（如
-0.1em）会压缩空格，但不能让两个单词重叠；超出压缩极限后，空白最小为0 - 百分比值无效——
word-spacing不支持% - 继承自父元素，但不会影响子元素内联盒的内部空格逻辑（比如 span 里再套 span，空格仍按最内层上下文计算）
和 letter-spacing、text-spacing 混用时的冲突
三者都调间距，但作用对象完全不同：word-spacing 动空格，letter-spacing 动字，text-spacing（实验性）动标点+空格的组合行为。混用极易出意料结果。
典型踩坑：
- 给一段英文同时设
word-spacing: 10px和letter-spacing: 2px，结果每个字母间+2px，每个单词间+10px，但“单词间”包含末字母到下一个首字母的距离，视觉上会显得松散失衡 -
text-spacing目前仅 Firefox 支持，且会覆盖word-spacing对中文标点前空格的处理，Chrome 下直接忽略 - 用
font-feature-settings: "kern"开启字体连字时，letter-spacing仍生效，但word-spacing不干扰连字逻辑
响应式场景下 word-spacing 的适配难点
字号缩放时，固定 px 值的 word-spacing 容易显得突兀：小屏下 8px 空隙太大，大屏下又不够呼吸感。
更稳妥的做法：
- 优先用相对单位，如
word-spacing: 0.15em，它随font-size缩放，和字宽比例协调 - 避免在
rem基础上再套媒体查询微调——多数情况，一个em值已足够适应大多数断点 - 注意 WebKit 内核（Safari）对小数值渲染有舍入误差，
word-spacing: 0.05em可能被当作0，建议不低于0.1em
真正难的不是设值，而是判断哪里该用 word-spacing：它只适用于你明确控制空格语义的场景，比如英文标题、代码片段注释、或需要微调排版节奏的引文。拿它去“拯救”中文段落间距，从起点就错了。
