CSS如何排除空格等字符使其不显示text-decoration删除线效果

目前没有全浏览器兼容的原生CSS属性可以直接指定排除特定字符、使其不应用text-decoration文本装饰效果，在text-decoration-skip: spaces浏览器支持度不足无法上线的场景下，可使用以下落地性强的方案：

• 方案1：自定义渐变删除线替代原生line-through（推荐，全场景兼容）
  放弃原生删除线能力，用背景渐变模拟删除线效果，借助background-clip: text属性让删除线只绘制在实际文字区域，自动跳过所有普通空格、 等空白字符，不会在空白位置渲染横穿的短横线。
  替换原有del标签样式即可：

del {
  /* 移除原生删除线 */
  text-decoration: none;
  /* 保留原有警告背景色 */
  background-color: var(--color-warn-light);
  /* 用渐变绘制1px粗的居中删除线，颜色自动继承当前文字颜色 */
  background-image: linear-gradient(transparent calc(50% - 0.5px), currentColor 0.5px, transparent calc(50% + 0.5px));
  /* 核心配置：背景仅在文字区域渲染，自动跳过空白 */
  -webkit-background-clip: text;
  background-clip: text;
}

该方案兼容近10年所有主流浏览器版本，不管是单独包裹空格的<del>&nbsp;</del>场景，还是文字和空格混排的del标签，都能实现空白位置不显示删除线的效果，不需要修改HTML结构，也不影响文本选择、复制等原生交互。

• 方案2：纯空格del标签定向覆盖（仅适合无混排场景）
  如果你的业务场景里不存在「文字+空格+文字」混排的del标签，只有单独包裹空格/ 的del元素会显示异常横线，可以用伪类直接覆盖这类元素的样式：

/* 匹配内容为空、或内容仅为空白字符的del标签，移除删除线 */
del:is(:empty, :-moz-only-whitespace) {
  text-decoration: none;
}

该方案代码量极小，但无法处理混排场景下del标签内部的空格，适用范围有限。

不推荐使用JS遍历文本节点、给空格单独套标签绕开的实现方式，这类方案维护成本高，还会破坏文本选择、复制、搜索的原生体验，优先选择纯CSS的渐变模拟方案。

内容的提问来源于stack exchange，提问作者Juri