text-decoration-skip

Avatar of Marie Mosley
Marie Mosley

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-spacingword-spacing 设置的任何空格。
  • ink:装饰线跳过字形或下坠部分。
  • edges:装饰线从内容起始边缘稍后开始,并在内容结束边缘稍早结束。此属性旨在防止两个并排的下划线元素看起来像是共享一个下划线。这对中文文本很有用,中文文本使用下划线来表示标点符号。
  • box-decoration:装饰线会跳过继承的边距、边框和填充。

更新:看起来 trailing-spaces 值现在已被弃用,因为它在 规范 中不再存在。

由于此属性尚不受任何浏览器支持,因此没有演示,但这里是一个示例,说明一旦 text-decoration-skip 实现后,每个值可能是什么样子。

text-decoration-skip illustration

text-decoration-skip 在 OSX 和 iOS 中

在 2014 年后期,苹果对 Safari 和 iOS 浏览器中的 text-decoration 进行了更改,模拟了 text-decoration-skip: ink; 的工作方式。尽管 text-decoration-skip 的任何值都尚未正式实现,但您可以使用 -webkit-text-decoration-skip: none; 禁用此默认行为。

更多信息

浏览器支持

此浏览器支持数据来自 Caniuse,其中有更多详细信息。数字表示浏览器在该版本及更高版本中支持该功能。

桌面

ChromeFirefoxIEEdgeSafari
130132127TP

移动设备/平板电脑

Android ChromeAndroid FirefoxAndroidiOS Safari
12712712718.0*