中西文之间的自动间距:text-autospace
「今天 PM2.5 是 36」「用 React 写了 3 个组件」——中文紧挨着拉丁字母 / 数字时,没有一点间隙,显得局促拥挤。排版规范(如《中文文案排版指北》)建议在 CJK 与西文 / 数字之间加一个窄空格。过去只能手动敲空格,或借助 pangu.js 之类的脚本自动补全。CSS Text Module Level 4
的 text-autospace 让浏览器自动完成这件事——一行 CSS,不改动文本。
1 · 它在哪里插空格
text-autospace 只在文本边界处理间距,不改动字符串本身:在表意文字(CJK)与拉丁字母 / 数字相邻处插入 1/8 个表意字前进宽度,规范写作 0.125ic。规范专门加了注:1/4ic 是金属活字时代的历史惯例,CSS 取更保守的
1/8ic。这份间距与 letter-spacing、word-spacing 是叠加关系,而非取代。
取值方面,normal 定义为 ideograph-alpha ideograph-numeric 两个关键字的简写,因而不含标点处理;no-autospace 全关;另有 punctuation 处理标点、insert 与 replace 决定是插入还是吃掉已有空格。标点、已有空格、纯中文之间在
normal 下都不动。
警示 · 各取值的落地进度并不一致(核对于 2026-08):normal 与 no-autospace 在 Chrome 140、Firefox 145、Safari 18.4 起可用;ideograph-alpha / ideograph-numeric / insert 只有 Firefox 145 与 Safari 18.4 支持,Chrome
至今未实现;punctuation 与 replace 三家都未实现。另需注意各实现当前的初始值是 no-autospace 而非规范的 normal。不支持时可退回构建期 / 运行期补窄空格的方案(pangu.js),效果近似但会改动文本内容。
对照:手动补窄空格栏是真的往字符串里插了 U+2009 THIN SPACE 字符——复制文本会带上它;而 CSS 栏的 text-autospace 是纯渲染层的间距,复制出来仍是原文。能用 CSS 实现就不要改动文本。