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

不跳过任何内容。因此，文本装饰线会绘制所有文本内容和原子内联级框。

objects

如果元素是原子内联（例如图像或内联块），则跳过元素的整个边距框。

spaces

跳过所有空格：所有Unicode 空格字符和所有单词分隔符，以及任何相邻的letter-spacing 或word-spacing。

leading-spaces

与 spaces 相同，但仅跳过前导空格。

trailing-spaces

与 spaces 相同，但仅跳过尾随空格。

edges

文本装饰的开始和结束稍微内缩（例如，线条粗细的一半）到装饰框的内容边缘。因此，相邻的元素会收到单独的下划线。（这在中文中很重要，因为下划线是一种标点符号。）

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

box-decoration

文本装饰会跳过框的边距、边框和填充区域。这仅对祖先强加的装饰有效；装饰框永远不会绘制在其自己的框装饰之上。

正式定义

初始值	`objects`
应用于	所有元素
继承	是
计算值	按指定
动画类型	离散

正式语法

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 # text-decoration-skipping

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅

text-decoration-skip-ink