在此页

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

text-decoration-skip-ink CSS property specifies how overlines and underlines are drawn when they pass over glyph ascenders and descenders.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

text-decoration-skip-ink is not part of the text-decoration shorthand.

句法

/* Single keyword */
text-decoration-skip-ink: none;
text-decoration-skip-ink: auto;
text-decoration-skip-ink: all;
/* Global keywords */
text-decoration-skip: inherit;
text-decoration-skip: initial;
text-decoration-skip: unset;
					

值

none

Underlines and overlines are drawn across the full length of the text content, including parts that cross over glyph descenders and ascenders.

auto

The default — the browser may interrupt underlines and overlines so that they do not touch or closely approach a glyph. That is, they are interrupted where they would otherwise cross over a glyph.

all

The browser must interrupt underlines and overlines so that they do not touch or closely approach a glyph. This can be helpful with certain Chinese, Japanese, or Korean (CJK) fonts, where the auto behavior might not create interruptions.

形式定义

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

形式句法

auto | all | none
					

范例

HTML

<p>You should go on a quest for a cup of coffee.</p>
<p class="no-skip-ink">Or maybe you'd prefer some tea?</p>
<p>この文は、 text-decoration-skip-ink: auto の使用例を示しています。</p>
<p class="skip-ink-all">この文は、 text-decoration-skip-ink: all の使用例を示しています。</p>
					

CSS

p {
  font-size: 1.5em;
  text-decoration: underline blue;
  text-decoration-skip-ink: auto; /* this is the default anyway */
}
.no-skip-ink {
  text-decoration-skip-ink: none;
}
.skip-ink-all{
  text-decoration-skip-ink: all;
}
					

结果

规范

规范	状态	注释
CSS Text Decoration Module Level 4 The definition of 'text-decoration-skip-ink' 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-ink	Chrome 完整支持 64	Edge 完整支持 79	Firefox 完整支持 70	IE 不支持 No	Opera 完整支持 50	Safari 不支持 No	WebView Android 完整支持 64	Chrome Android 完整支持 64	Firefox Android 不支持 No	Opera Android 完整支持 46	Safari iOS 不支持 No	Samsung Internet Android 完整支持 9.0
all	Chrome 不支持 No	Edge 不支持 No	Firefox 完整支持 75	IE 不支持 No	Opera 不支持 No	Safari 不支持 No	WebView Android 不支持 No	Chrome Android 不支持 No	Firefox Android 不支持 No	Opera Android 不支持 No	Safari iOS 不支持 No	Samsung Internet Android 不支持 No

图例

完整支持

完整支持

不支持

不支持

另请参阅

• text-decoration
• text-decoration-skip

元数据

• 最后修改： 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