文本修饰-跳过 | text-decoration-skip

该text-decoration-skip CSS属性指定元素中的哪些文本内容部分是任何文本修饰都必须跳过的。该条属性涉到在该元素内和它的祖先节点中所定义的一切文字修饰。

/* Single keyword */
text-decoration-skip: none;
text-decoration-skip: objects;
text-decoration-skip: spaces;
text-decoration-skip: ink;
text-decoration-skip: edges;
text-decoration-skip: box-decoration;

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

/* Global keywords */
text-decoration-skip: inherit;
text-decoration-skip: initial;
text-decoration-skip: unset;

语法

可能的值

none——不会跳过任何内容，即为所有文本内容和原子 inline-level boxes绘制文本装饰。

objects——如果元素是一个原子内联元素（如图像或内联块），则会跳过该元素的整个外边距框。

spaces——所有的间距都被跳过，即所有的Unicode空白字符和所有的字分隔符，以及任何相邻的letter-spacing或word-spacing。

ink——文字修饰只在没有触及或接近字符的地方绘制。也就是说，在它可能越出字符的地方，该修饰会被中断。

edges——文字装饰线的首尾从内容边缘略微向内（例如，线宽的一半）放置。例如，两个带下划线的元素并不会显示为单下划线。（这在中文里很重要，下划线是一种标点符号。）

box-decoration——文本装饰跳过box的外边距，边框和填充区域。这只对祖先的装饰有影响; 一个decorating box从不在它自己的box decoration上进行绘制。

形式语法

none | [](value_definition_syntax#Brackets) objects || spaces || ink || edges || box-decoration []

实例

HTML内容

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

CSS内容

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

结果

规范

Browser Compatibility