1. Web
  2. CSS
  3. text-decoration-skip-ink

text-decoration-skip-ink

Baseline 广泛可用 *

此特性已经十分成熟，可在许多设备和浏览器版本上使用。自 2022 年 3 月起，它已在各浏览器中可用。

* 此特性的某些部分可能存在不同级别的支持。

text-decoration-skip-ink CSS 属性指定了当上划线和下划线经过字形的升部和降部时，它们的绘制方式。

试一试

text-decoration-skip-ink: auto;

text-decoration-skip-ink: none;

<section id="default-example">
  <p>
    <span class="transition-all" id="example-element">parapsychologists</span>
  </p>
</section>

p {
  font:
    1.9em "Georgia",
    serif;
  text-decoration: underline;
}

text-decoration-skip-ink 不属于 text-decoration 简写属性。

语法

css
/* Single keyword */
text-decoration-skip-ink: none;
text-decoration-skip-ink: auto;
text-decoration-skip-ink: all;

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

值

none

下划线和上划线将绘制在文本内容的完整长度上，包括与字形降部和升部交叉的部分。

auto

默认行为是——浏览器可以中断下划线和上划线，使它们不接触或不接近字形。也就是说，它们会在可能与字形交叉的地方中断。

all

浏览器必须中断下划线和上划线，使它们不接触或不接近字形。这对于某些中文、日文或韩文（CJK）字体可能很有帮助，因为 auto 行为可能不会创建中断。

An example of "text-decoration-skip-ink".

正式定义

初始值auto
应用于所有元素
继承性是
计算值同指定值
动画类型离散

正式语法

text-decoration-skip-ink = 
  auto  |
  none  |
  all

示例

HTML

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

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 文本装饰模块第 4 级
# text-decoration-skip-ink-property

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面最后修改于 由 MDN 贡献者。

在 GitHub 上查看此页面 • 报告此内容的问题
© . Content available under a Creative Commons license.