在此页

• 句法
• 形式定义
• 形式句法
• 范例
• 规范
• 浏览器兼容性
• 另请参阅
• 相关话题

text-decoration-skip CSS property sets what parts of an element’s content any text decoration affecting the element must skip over. It controls all text decoration lines drawn by the element and also any text decoration lines drawn by its ancestors.

注意： Most other browsers are converging on supporting the simpler text-decoration-skip-ink 特性。

/* 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: unset;
					

句法

值

none

Nothing is skipped. Thus, text decoration is drawn for all text content and across atomic inline-level boxes.

对象

The entire margin box of the element is skipped if it is an atomic inline such as an image or inline-block.

spaces

All spacing is skipped: all Unicode white space characters and all word separators, plus any adjacent letter-spacing or word-spacing .

leading-spaces

如同 spaces , except that only leading spaces are skipped.

trailing-spaces

如同 spaces , except that only trailing spaces are skipped.

edges

The start and end of the text decoration is inset slightly (e.g., by half of the line thickness) from the content edge of the decorating box. Thus, adjacent elements receive separate underlines. (This is important in Chinese, where underlining is a form of punctuation.)

box-decoration

The text decoration is skipped over the box's margin, border, and padding areas. This only has an effect on decorations imposed by an ancestor; a decorating box never draws over its own box decoration.

形式定义

初始值	对象
适用于	所有元素
继承	yes
计算值	如指定
动画类型	discrete

形式句法

none | [ objects || [ spaces | [ leading-spaces || trailing-spaces ] ] || edges || box-decoration ]
					

范例

Skipping edges

HTML

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

CSS

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

结果

规范

规范	状态	注释
CSS Text Decoration Module Level 4 The definition of 'text-decoration-skip' in that specification.	工作草案	初始定义

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
text-decoration-skip Experimental	Chrome 不支持 57 — 64 注意事项 不支持 57 — 64 注意事项 注意事项 Only supports the deprecated ink 值。	Edge 不支持 No	Firefox 不支持 No	IE 不支持 No	Opera 不支持 44 — 50 注意事项 不支持 44 — 50 注意事项 注意事项 Only supports the deprecated ink 值。	Safari 完整支持 12.1 注意事项 完整支持 12.1 注意事项 注意事项 Only supports the none and skip values; all other values behave like those two values. 完整支持 8 Prefixed 注意事项 Prefixed Implemented with the vendor prefix: -webkit- 注意事项 Only supports the none and skip values; all other values behave like those two values.	WebView Android 不支持 57 — 64 注意事项 不支持 57 — 64 注意事项 注意事项 Only supports the deprecated ink 值。	Chrome Android 不支持 57 — 64 注意事项 不支持 57 — 64 注意事项 注意事项 Only supports the deprecated ink 值。	Firefox Android 不支持 No	Opera Android 不支持 43 — 46 注意事项 不支持 43 — 46 注意事项 注意事项 Only supports the deprecated ink 值。	Safari iOS 完整支持 12.2 注意事项 完整支持 12.2 注意事项 注意事项 Only supports the none and skip values; all other values behave like those two values. 完整支持 8 Prefixed 注意事项 Prefixed Implemented with the vendor prefix: -webkit- 注意事项 Only supports the none and skip values; all other values behave like those two values.	Samsung Internet Android 不支持 7.0 — 9.0 注意事项 不支持 7.0 — 9.0 注意事项 注意事项 Only supports the deprecated ink 值。

图例

完整支持

完整支持

不支持

不支持

实验。期望将来行为有所改变。

实验。期望将来行为有所改变。

见实现注意事项。

见实现注意事项。

要求使用供应商前缀或不同名称。

要求使用供应商前缀或不同名称。

另请参阅

• text-decoration-skip-ink

元数据

• 最后修改： Jul 21, 2020

相关话题

1. CSS
2. CSS 参考
3. CSS Text Decoration
4. 特性

   1. text-decoration
   2. text-decoration-color
   3. text-decoration-line
   4. text-decoration-skip
   5. text-decoration-skip-ink
   6. text-decoration-style
   7. text-decoration-thickness
   8. text-emphasis
   9. text-emphasis-color
   10. text-emphasis-position
   11. text-emphasis-style
   12. text-shadow
   13. text-underline-offset
   14. text-underline-position