
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:它只适用于你明确控制空格语义的场景,比如英文标题、代码片段注释、或需要微调排版节奏的引文。拿它去“拯救”中文段落间距,从起点就错了。











