text-decoration-skip-ink

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.

* Some parts of this feature may have varying levels of support.

Die text-decoration-skip-ink-Eigenschaft von CSS gibt an, wie Über- und Unterstriche gezeichnet werden, wenn sie Glyphenauf- und -abstiege überqueren.

Probieren Sie es aus

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 ist nicht Teil des text-decoration-Kurzbefehls.

Syntax

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;

Werte

none

Unterstriche und Überstriche werden über die gesamte Länge des Textinhalts gezogen, einschließlich der Teile, die über Glyphenabstiege und -aufstiege verlaufen.

auto

Standardmäßig kann der Browser Unterstriche und Überstriche unterbrechen, damit sie eine Glyphe nicht berühren oder sich ihr zu sehr nähern. Das bedeutet, sie werden unterbrochen, wo sie sonst über eine Glyphe verlaufen würden.

all

Der Browser muss Unterstriche und Überstriche unterbrechen, damit sie eine Glyphe nicht berühren oder sich ihr zu sehr nähern. Dies kann bei bestimmten chinesischen, japanischen oder koreanischen (CJK) Schriftarten hilfreich sein, bei denen das auto-Verhalten möglicherweise keine Unterbrechungen erzeugt.

Ein Beispiel für "text-decoration-skip-ink".

Formale Definition

Anfangswert	`auto`
Anwendbar auf	alle Elemente
Vererbt	Ja
Berechneter Wert	wie angegeben
Animationstyp	diskret

Formale Syntax

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

Beispiele

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;
}

Ergebnis

Spezifikationen

Specification
CSS Text Decoration Module Level 4 # text-decoration-skip-ink-property