CSS 与布局 / 字体里的隐藏开关 / 中西文之间的自动间距:text-autospace 待审核 5 / 18
混排 · text-autospace

中西文之间的自动间距:text-autospace

「今天 PM2.5 是 36」「用 React 写了 3 个组件」——中文紧挨着拉丁字母 / 数字时,没有一点间隙,显得局促拥挤。排版规范(如《中文文案排版指北》)建议在 CJK 与西文 / 数字之间加一个窄空格。过去只能手动敲空格,或借助 pangu.js 之类的脚本自动补全。CSS Text Module Level 4 的 text-autospace浏览器自动完成这件事——一行 CSS,不改动文本。

图 1-1 · 同一段中西混排文本在 text-autospace 开与关下的对照,以及手动补窄空格的做法。徽标显示当前浏览器是否支持该属性。

1 · 它在哪里插空格

text-autospace 只在文本边界处理间距,不改动字符串本身:在表意文字(CJK)拉丁字母 / 数字相邻处插入 1/8 个表意字前进宽度,规范写作 0.125ic。规范专门加了注:1/4ic 是金属活字时代的历史惯例,CSS 取更保守的 1/8ic。这份间距与 letter-spacingword-spacing叠加关系,而非取代。

取值方面,normal 定义为 ideograph-alpha ideograph-numeric 两个关键字的简写,因而不含标点处理;no-autospace 全关;另有 punctuation 处理标点、insertreplace 决定是插入还是吃掉已有空格。标点、已有空格、纯中文之间在 normal 下都不动。

警示 · 各取值的落地进度并不一致(核对于 2026-08):normalno-autospace 在 Chrome 140、Firefox 145、Safari 18.4 起可用;ideograph-alpha / ideograph-numeric / insert 只有 Firefox 145 与 Safari 18.4 支持,Chrome 至今未实现;punctuationreplace 三家都未实现。另需注意各实现当前的初始值是 no-autospace 而非规范的 normal。不支持时可退回构建期 / 运行期补窄空格的方案(pangu.js),效果近似但会改动文本内容。

对照:手动补窄空格栏是真的往字符串里插了 U+2009 THIN SPACE 字符——复制文本会带上它;而 CSS 栏的 text-autospace纯渲染层的间距,复制出来仍是原文。能用 CSS 实现就不要改动文本。