text-decoration-skip-ink

text-decoration-skip-ink 是一个属性，用于控制 underline 和 overline（但不是 line-through）在穿过字符/字形一部分时的行为。 这让您可以微调控制下划线或上划线如何与超出顶线或悬挂在底线下方字符交互。

之前，这通过 text-decoration-skip: ink; 属性/值组合来处理，但在讨论如何处理层叠样式无意中覆盖低优先级样式（由于 text-decoration-skip 可用选项数量）的问题后，各个属性将被分解成类似于 text-decoration-skip-ink 的新属性。 有关更改原因的更多背景信息和示例，请参阅 此 GitHub 讨论 和 CSS 工作组会议记录，其中讨论了这些属性。

默认情况下，浏览器会“跳过”字符“墨迹”与下划线交叉的区域，如下所示

您可以通过将 text-decoration-skip-ink 设置为 none 来更改此行为，从而强制下划线/上划线穿过字符。

.line-of-text-thats-already-underlined {
  text-decoration-skip-ink: none;
}

这会导致线条直接穿过字符

语法

text-decoration-skip-ink: auto | none;

值

text-decoration-skip-ink 接受以下值

• auto 是默认值，将在穿过字符时“跳过”下划线/上划线。
• none 将直接穿过悬挂的 y 和高耸的 t，将下划线/上划线切断。

示例

浏览器支持

更多信息

• MDN 文档
• 在网络上设置下划线
• 阅读障碍用户和跳过墨迹下划线

相关