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.