text-decoration-skip
版本： CSS3
CSS text-decoration-skip 属性定义了元素哪些部分的内容需要被文本修饰所跳过。它可以控制所有该元素或该元素的祖先所绘制的文本修饰线。
示例
/* 关键字 */ text-decoration-skip: none; text-decoration-skip: objects; text-decoration-skip: spaces; text-decoration-skip: edges; text-decoration-skip: box-decoration; /* 使用多个关键字 */ text-decoration-skip: objects spaces; text-decoration-skip: leading-spaces trailing-spaces; text-decoration-skip: objects edges box-decoration; /* 全局值 */ text-decoration-skip: inherit; text-decoration-skip: initial; text-decoration-skip: unset;
浏览器支持
|
|
|
|
|
仅仅safari浏览器支持
text-decoration-skip
，其余浏览器都不支持
text-decoration-skip
|
||||
语法:
text-decoration-skip :none | objects | spaces | leading-spaces | trailing-spaces | edges | box-decoration
取值:
- none:没有任何内容被跳过。因此，文本修饰会为所有文本内容和行内元素进行绘制。
- objects:拥有完整盒模型的原子行内元素会被跳过，例如图片和行内块元素。
- spaces:所有的空格会被跳过，包括：所有的 Unicode 空白字符和所有的分词符，以及任意相邻的 letter-spacing 或 word-spacing。
- leading-spaces:除了只跳过开始的空格外，与 spaces 相同。
- trailing-spaces:除了只跳过结尾的空格外，与 spaces 相同。
- edges:文本修饰的开始与结束会比原有的装饰范围向内收缩（例如半个线宽）。这样，相邻的元素的下划线就可以分开。（这对于中文很重要，因为在中文中，下划线也是一种形式的标点符号。）
- box-decoration:文本修饰会跳过盒模型的内边距、边框、外边距。这只会影响到祖先元素定义的修饰；修饰的盒不会渲染本身的盒修饰。
说明:
检索或设置对象中的文本装饰线条必须略过内容中的哪些部分。
对应的脚本特性为 textDecorationSkip 。
| 默认值 | objects |
| 适用于 | 所有元素 |
| 继承性 | 有 |
| 动画性 | 否 |
| 计算值 | 指定值 |
<!DOCTYPE html>
<html lang="zh-cmn-hans">
<head>
<meta charset="utf-8"/>
<style>
p {
margin: 0;
font-size: 3em;
text-decoration: underline;
text-decoration-skip: edges;
}
</style>
</head>
<body>
<p><span>Hey,</span> <span>grab a cup of coffee!</span></p>
</body>
</html>
Hey, grab a cup of coffee!