word-spacing 对表格单元格内容基本不生效,尤其中文无空格时完全无效;英文仅在真实空格处生效;应优先使用 letter-spacing 控制字符密度,并注意负值风险与继承污染。

word-spacing 对表格单元格内容基本不生效
直接给 <td> 或 <code><th> 设置 <code>word-spacing 几乎不会产生预期效果,尤其在中文表格中。浏览器把整段无空格的中文(如 <td>用户信息</td>)识别为一个“词”,word-spacing 没有可插入空隙的位置。
英文表格里 word-spacing 生效但受制于空格位置
只有当单元格内文本本身包含真实空格(ASCII 0x20)、制表符或换行符时,word-spacing 才会在这些分隔处加间距:
-
<td>First Name</td>→word-spacing: 8px会在 “First” 和 “Name” 之间加 8px -
<td>IDNumber</td>(无空格)→word-spacing完全无效 -
<td>Order #123</td>(含)→是字符,不是空白符,word-spacing不作用于它
想调表格文字密度,优先用 letter-spacing
无论中英文,只要目标是让字符之间更松或更紧,letter-spacing 才是可靠选择:
- 对中文标题:
th { letter-spacing: 0.05em; }能均匀拉开每个汉字 - 对英文按钮文字:
button { letter-spacing: 1px; }比依赖空格的word-spacing更可控 - 注意负值风险:
letter-spacing: -0.03em是中文收紧的临界安全值,再小易导致笔画粘连 - 避免继承污染:如果
table设了letter-spacing,子元素如<span class="badge"></span>可能被意外拉宽,需显式重置:.badge { letter-spacing: normal; }
强行用 word-spacing 的代价和替代方案
有人会手动在 HTML 中插入空格来“骗过” word-spacing,比如把 <td>联系电话</td> 改成 <td>联 系 电 话</td>,但这带来三个硬伤:
- 破坏语义和可访问性:屏幕阅读器会读成“联 空格 联 空格 系…”
- 影响搜索与复制:用户复制内容会带多余空格
- 响应式失效:窄屏下空格可能引发非预期换行
真要模拟“词间距”感,不如用 letter-spacing 配合字体特性(如 font-feature-settings: "kern")或 CSS 自定义属性做微调,别碰 word-spacing 这个伪解法。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











