text-decoration-skip
定义元素哪些部分的内容需要被文本修饰所跳过，可以控制所有该元素或该元素的祖先所绘制的文本修饰线。
/* 关键字 */
text-decoration-skip: none;
text-decoration-skip: objects;
text-decoration-skip: spaces;
text-decoration-skip: edges;
/* 使用多个关键字 */
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;
- 初始值：
objects - 适用于：所有元素
- 继承性：继承
文档
developer.mozilla.org/zh-CN/docs/…
语法
| 取值 | 描述 |
|---|---|
none | 不跳过任何内容。 |
objects | 拥有完整盒模型的原子行内元素会被跳过，例如图片和行内块元素。 |
spaces | 跳过所有的空格。 |
leading-spaces | 跳过开始的空格。 |
trailing-spaces | 跳过结尾的空格。 |
edges | 文本修饰的开始与结束会比原有的装饰范围向内收缩（例如半个线宽）。这样，相邻的元素的下划线就可以分开。（这对于中文很重要，因为在中文中，下划线也是一种形式的标点符号。） |
box-decoration | 文本修饰会跳过盒模型的内边距、边框、外边距。这只会影响到祖先元素定义的修饰；修饰的盒不会渲染本身的盒修饰。 |
示例
HTML
<p class="line-through">这是一段<strong class="ib">文本</strong>。</p>
CSS
.line-through {
text-decoration: line-through;
text-decoration-color: red;
text-decoration-skip: objects;
}
.ib {
display: inline-block;
}
