文本修饰-跳过 | text-decoration-skip
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绘制文本装饰。
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 |
