写了八年 CSS，每次给下划线留缺口都要靠 SVG 遮罩——今天这件事被 Chrome 154 用一个属性彻底原生化了

写完了八年 CSS，每次给文字加下划线都要靠 SVG 遮罩——今天这件事被一个 CSS 属性彻底原生化了

做前端八年，下划线这事儿谁都逃不掉。给链接加下划线、给导航加下划线、给表格标题加下划线……加着加着就会发现一个问题：下划线会把空格也盖住，看起来特别丑。

比如这样的场景：

<a href="/contact">获取 帮助</a>

中间有个空格，正常下划线会这样：

获取  帮助

下划线直接从”取”穿到”帮”，中间那块空白也被线盖住了。很多人会用 SVG mask 或者 background-image 来做”留缺口”的下划线——代码复杂不说，维护起来也麻烦。

Chrome 154 今天把这件事用一个属性原生化了：text-decoration-skip-spaces。

这个属性怎么用

就一行：

a {
  text-decoration: underline;
  text-decoration-skip-spaces: auto; /* 新增 */
}

auto 值会让浏览器自动跳过空格字符，让下划线只在文字下方绘制。效果立竿见影：

获取  帮助

线只在”取”和”帮”下面，空格那里干干净净。

除了 auto，这个属性还支持这些值：

实际开发中 auto 够用了，语义清晰，行为合理。

用在哪里

这几个场景最典型：

1. 链接下划线
带空格的链接下划线最容易踩坑，text-decoration-skip-spaces: auto 直接解决。

2. 导航标签
导航里经常有空格（”关于我们”、”服务 条款”），下划线跳空感官好很多。

3. 按钮内联文字
按钮里中英文混排时加空格很常见，下划线干净了视觉质量直接上去。

4. 表格表头
表头文字加下划线装饰，空格跳过更精致。

兼容性

Chrome 154+ 和 Edge 154+ 已经支持。Firefox 和 Safari 还没上，生产环境建议加个 @supports 渐进增强：

a {
  text-decoration: underline;
}
@supports (text-decoration-skip-spaces: auto) {
  a {
    text-decoration-skip-spaces: auto;
  }
}

没有支持的浏览器回退到默认行为，不影响功能。

三个坑

1. 默认值是 none
老行为不会自动变，必须显式声明 auto 才会跳过空格。

2. all 的坑
all 会跳过所有 letter-spacing，不是所有场景都想要这个效果，建议先用 auto。

3. 和 text-decoration-skip-ink 别搞混
text-decoration-skip-ink 控制线是否绕过字形（上下凸出部分），text-decoration-skip-spaces 控制空格，这是两个完全不同的属性，别混用。

下一步

就一步：在你的全局 CSS 里加这一行：

@supports (text-decoration-skip-spaces: auto) {
  a, .link {
    text-decoration-skip-spaces: auto;
  }
}

如果你还在用 SVG mask 做下划线留空，现在可以删掉那些 hack 代码了。