text-decoration-skip

可用性有限

此特性不是基线特性,因为它在一些最广泛使用的浏览器中不起作用。

实验性: 这是一项实验性技术
在生产中使用此技术之前,请仔细检查浏览器兼容性表格

text-decoration-skip CSS 属性设置元素内容中任何影响元素的文本装饰必须跳过哪些部分。它控制由元素绘制的所有文本装饰线,以及由其祖先绘制的任何文本装饰线。

注意: 大多数其他浏览器正趋于支持更简单的 text-decoration-skip-ink 属性。

语法

css
/* Keyword values */
text-decoration-skip: none;
text-decoration-skip: objects;
text-decoration-skip: spaces;
text-decoration-skip: edges;
text-decoration-skip: box-decoration;

/* Multiple keywords */
text-decoration-skip: objects spaces;
text-decoration-skip: leading-spaces trailing-spaces;
text-decoration-skip: objects edges box-decoration;

/* Global values */
text-decoration-skip: inherit;
text-decoration-skip: initial;
text-decoration-skip: revert;
text-decoration-skip: revert-layer;
text-decoration-skip: unset;

none

不跳过任何内容。因此,文本装饰绘制所有文本内容并跨越原子行内级框。

对象

如果元素是原子行内元素(例如图像或行内块),则跳过元素的整个外边距框。

空格

跳过所有间距:所有 Unicode 空格字符和所有单词分隔符,以及任何相邻的 letter-spacingword-spacing

leading-spaces

spaces 相同,但只跳过前导空格。

trailing-spaces

spaces 相同,但只跳过尾随空格。

edges

文本装饰的开始和结束从装饰框的内容边缘稍微向内缩进(例如,缩进线厚度的一半)。因此,相邻元素会获得单独的下划线。(这在中国很重要,因为下划线是一种标点形式。)

An example of "text-decoration-skip: edges;".

box-decoration

文本装饰跳过框的外边距、边框和内边距区域。这仅对祖先施加的装饰有效;装饰框从不绘制在自己的框装饰上。

正式定义

初始值对象
应用于所有元素
继承性
计算值同指定值
动画类型离散

正式语法

text-decoration-skip = 
none |
auto

示例

跳过边缘

HTML

html
<p>Hey, grab a cup of <em>coffee!</em></p>

CSS

css
p {
  margin: 0;
  font-size: 3em;
  text-decoration: underline;
  text-decoration-skip: edges;
}

结果

规范

规范
CSS 文本装饰模块第 4 级
# 文本装饰跳过

浏览器兼容性

另见