DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 $200 免费信用额度!
text-decoration-skip
属性指定文本下划线、上划线或删除线应在何处中断。这提高了装饰文本的可读性,并纠正了一些语言的标点语法。
这里有一个例子
a {
text-decoration-skip: ink;
}
注意!ink
值已更改为全新的属性 text-decoration-skip-ink: auto;
。
如果您的浏览器支持此属性,您会在此处注意到每个字符(如“y”和“p”)的下坠部分周围都有小空格
如果您的浏览器不支持此功能,那么这就是您在支持浏览器中对该属性的期望

text-decoration-skip: ink;
实际实现时的样子,但这种下坠清除样式是 Marcin Wichary 对完美下划线愿景的一部分,正如他在 这里 所述。值
objects
:默认值。装饰线会跳过内联对象,例如图像或内联块元素。none
:装饰线穿过所有内容,包括通常会跳过的内联对象。spaces
:装饰线会跳过空格、单词分隔符字符以及使用letter-spacing
或word-spacing
设置的任何空格。ink
:装饰线跳过字形或下坠部分。edges
:装饰线从内容起始边缘稍后开始,并在内容结束边缘稍早结束。此属性旨在防止两个并排的下划线元素看起来像是共享一个下划线。这对中文文本很有用,中文文本使用下划线来表示标点符号。box-decoration
:装饰线会跳过继承的边距、边框和填充。
更新:看起来 trailing-spaces
值现在已被弃用,因为它在 规范 中不再存在。
由于此属性尚不受任何浏览器支持,因此没有演示,但这里是一个示例,说明一旦 text-decoration-skip
实现后,每个值可能是什么样子。

text-decoration-skip
在 OSX 和 iOS 中
在 2014 年后期,苹果对 Safari 和 iOS 浏览器中的 text-decoration
进行了更改,模拟了 text-decoration-skip: ink;
的工作方式。尽管 text-decoration-skip
的任何值都尚未正式实现,但您可以使用 -webkit-text-decoration-skip: none;
禁用此默认行为。
更多信息
- CSS 文本装饰模块级别 4
编辑草案 - MSDN 上的
text-decoration-skip
。 - 关于从 W3C 邮件列表中添加
trailing-spaces
作为值 的讨论。 - 通过跳过墨迹下划线来提高阅读障碍用户的文本可读性
- text-decoration-skip 在 MDN 上
- text-decoration-skip-ink 在 MDN 上
浏览器支持
此浏览器支持数据来自 Caniuse,其中有更多详细信息。数字表示浏览器在该版本及更高版本中支持该功能。
桌面
Chrome | Firefox | IE | Edge | Safari |
---|---|---|---|---|
130 | 132 | 否 | 127 | TP |
移动设备/平板电脑
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
127 | 127 | 127 | 18.0* |
相关
text-decoration
.element { text-decoration: underline; }
text-decoration-color
.element { text-decoration-color: orange; }
text-decoration-line
.element { text-decoration-line: underline; }
text-decoration-skip-ink
.element {text-decoration-skip-ink: none; }
text-decoration-style
.element { text-decoration-style: wavy; }
text-decoration-thickness
.element { text-decoration-thickness: 2px; }
我发现了一个要添加到支持表中的浏览器: 网景 3!
没有浏览器支持!!!!啊!!!!!!那它有什么意义呢?
但它确实有浏览器支持。如果浏览器不支持它……那也没关系,它纯粹是视觉增强。
看起来 Safari 现在支持它了。没有前缀。
哦,抱歉。它不支持。仍然是默认的。
Chromium 的主分支中已加入对
text-decoration-skip
及其值objects
、ink
的支持https://bugs.chromium.org/p/chromium/issues/detail?id=649700
是否值得添加一个 Codepen 来演示这一点,以便用户可以在 Canary 中查看此页面(一旦它很快发布)以查看它的实际效果?
它已加入 Chrome{e|ium} 57!如果您无法使其正常工作,请确保您转到
chrome://flags/#enable-experimental-web-platform-features
并启用该偏好设置。