文本修饰-跳过 | 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;

Initial value	objects
Applies to	all elements
Inherited	yes
Media	visual
Computed value	as specified
Animation type	discrete
Canonical order	order of appearance in the formal grammar of the values

语法

可能的值

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;
}

结果

规范

Specification	Status	Comment
CSS Text Decoration Module Level 3The definition of 'text-decoration-skip' in that specification.	Candidate Recommendation	Initial definition

Browser Compatibility

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	57	No support2	No support1	No support	44	No support3

Feature	Android	Chrome for Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	57	57	No support1	No support	44	No support3

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2017-12-18