`text-decoration-skip-ink` CSS property

Baseline Weitgehend verfügbar *

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit März 2022 browserübergreifend verfügbar.

* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.

Die text-decoration-skip-ink CSS Eigenschaft legt fest, wie Über- und Unterstriche gezeichnet werden, wenn sie über Buchstabenober- und Unterlängen verlaufen.

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 Shorthands.

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

Unter- und Überstriche werden über die gesamte Länge des Textinhalts gezogen, einschließlich der Teile, die über Buchstabenober- und Unterlängen verlaufen.

auto

Der Standardwert — der Browser kann Unter- und Überstriche unterbrechen, sodass sie einen Buchstaben nicht berühren oder sich ihm stark nähern. Das heißt, sie werden unterbrochen, wo sie sonst über einen Buchstaben verlaufen würden.

all

Der Browser muss Unter- und Überstriche unterbrechen, sodass sie einen Buchstaben nicht berühren oder sich ihm stark nähern. Dies kann bei bestimmten chinesischen, japanischen oder koreanischen (CJK) Schriftarten hilfreich sein, bei denen das Verhalten von auto 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

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

Browser-Kompatibilität

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

text-decoration-skip-ink CSS property

Help improve MDN

`text-decoration-skip-ink` CSS property