← 字体里的隐藏开关 / 中西文之间的自动间距: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 · 它在哪里插空格

text-autospace 只在文本边界处理间距,不改动字符串本身:在表意文字(CJK)拉丁字母 / 数字相邻处插入约 1/8 ~ 1/4 em 的间距。标点、已有的空格、纯中文之间都不动。取值:normal(开)、no-autospace(关)。

兼容性text-autospace 是较新的属性,本页 CSS 栏只有在支持它的浏览器里才会看出间距——上方徽标会显示当前浏览器是否 CSS.supports。不支持时,可退回手动补窄空格栏的 构建期 / 运行期补窄空格 方案(pangu.js),效果近似但会改动文本内容。

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