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-spacing或word-spacing。 leading-spaces-
与
spaces相同,但只跳过前导空格。 trailing-spaces-
与
spaces相同,但只跳过尾随空格。 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 级 # 文本装饰跳过 |
浏览器兼容性
加载中…