CSS text-decoration-skip-ink-Eigenschaft

Die Eigenschaft text-decoration-skip-ink legt fest, wie Unter- und Überstriche gezeichnet werden, wenn sie über ein Glyph (Zeichen) verlaufen.

INFO

Wenn die text-decoration-line Eigenschaft auf „underline“ und „overline“ gesetzt ist, hat die Eigenschaft text-decoration-skip-ink eine Wirkung. Der Wert „line-through“ bleibt unverändert.

Anfangswert	auto
Anwendbar auf	Alle Elemente.
Vererbbar	Ja.
Animierbar	Nein.
Version	CSS Text Decoration Module Level 4
DOM-Syntax	object.style.textDecorationSkipInk = "none";

Syntax

CSS text-decoration-skip-ink Werte

css

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

Beispiel für die text-decoration-skip-ink-Eigenschaft:

CSS text-decoration-skip-ink Codebeispiel

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .ex1 {
        margin: 0;
        font-size: 2em;
        text-decoration: underline #1c87c9;
        text-decoration-skip-ink: none;
      }
      .ex2 {
        margin: 0;
        font-size: 2em;
        text-decoration: underline #1c87c9;
        text-decoration-skip-ink: auto;
      }
    </style>
  </head>
  <body>
    <h2>
        Text-decoration-skip-ink property example
    </h2>
    <h3>
        Text-decoration-skip-ink: none;
    </h3>
    <p class="ex1">
      Lorem ipsum is simply dummy text
    </p>
    <h3>
        Text-decoration-skip-ink:auto;
    </h3>
    <p class="ex2">
      Lorem ipsum is simply dummy text
    </p>
  </body>
</html>

Try it Yourself »

Ergebnis

Liste der CSS text-decoration-skip-ink Werte

Werte

Wert	Beschreibung
auto	Unter- und Überstriche werden nur dort gezeichnet, wo sie kein Glyph berühren oder sich ihm nicht nähern. Dies ist der Standardwert dieser Eigenschaft.
none	Unter- und Überstriche werden für den gesamten Textinhalt gezeichnet, einschließlich der Teile, die über die Unterlängen und Oberlängen der Glyphen verlaufen.
initial	Legt die Eigenschaft auf ihren Standardwert fest.
inherit	Erbt die Eigenschaft von ihrem übergeordneten Element.

Praxis

Welche Funktion hat die CSS-Eigenschaft 'text-decoration-skip-ink'?

Es zwingt den Text, unterstrichen zu werden, ohne Zeichen zu überspringen.Es lässt den Unterstrich über Unterlängen springen.Es ändert die Farbe des Unterstrichs auf die gleiche Farbe wie die Link-Farbe.Es ändert den Stil des Unterstrichs in gepunktet, gestrichelt oder durchgezogen.Es wendet automatisch einen Unterstrich auf den Text an.Es kann verhindern, dass Unterstriche durch Glyphen schneiden.

CSS text-decoration-skip-ink-Eigenschaft ​

Syntax ​

Beispiel für die text-decoration-skip-ink-Eigenschaft: ​

Ergebnis ​