text-decoration-skip

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Die text-decoration-skip CSS Eigenschaft legt fest, welche Teile des Inhalts eines Elements bei der Anwendung von Textdekorationen übersprungen werden müssen. Sie steuert alle vom Element gezeichneten Textdekorationen sowie alle Textdekorationen, die von seinen Vorfahren gezeichnet werden.

Hinweis: Die meisten anderen Browser bewegen sich dahin, die einfachere Eigenschaft text-decoration-skip-ink zu unterstützen.

Syntax

css
/* Keyword values */
text-decoration-skip: none;
text-decoration-skip: objects;
text-decoration-skip: spaces;
text-decoration-skip: edges;
text-decoration-skip: box-decoration;

/* Multiple keywords */
text-decoration-skip: objects spaces;
text-decoration-skip: leading-spaces trailing-spaces;
text-decoration-skip: objects edges box-decoration;

/* Global values */
text-decoration-skip: inherit;
text-decoration-skip: initial;
text-decoration-skip: revert;
text-decoration-skip: revert-layer;
text-decoration-skip: unset;

Werte

none

Es wird nichts übersprungen. Somit wird die Textdekoration für alle Textinhalte und über atomare Inline-Level-Boxen hinweg gezeichnet.

objects

Die gesamte Margin-Box des Elements wird übersprungen, wenn es sich um ein atomare Inline-Formatierungseinheit wie ein Bild oder ein Inline-Block handelt.

spaces

Alle Abstände werden übersprungen: alle Unicode-Leerzeichen und alle Worttrennzeichen, plus alle angrenzenden letter-spacing oder word-spacing.

leading-spaces

Dasselbe wie spaces, außer dass nur führende Leerzeichen übersprungen werden.

trailing-spaces

Dasselbe wie spaces, außer dass nur nachfolgende Leerzeichen übersprungen werden.

edges

Der Anfang und das Ende der Textdekoration sind leicht (z.B. um die Hälfte der Linienstärke) vom Inhaltsrand der dekorierenden Box eingezogen. Somit erhalten benachbarte Elemente separate Unterstreichungen. (Dies ist im Chinesischen wichtig, wo Unterstreichen eine Form der Interpunktion darstellt.)

Ein Beispiel für "text-decoration-skip: edges;".

box-decoration

Die Textdekoration wird über den Rand, die Umrandung und den Padding-Bereich der Box übersprungen. Dies hat nur eine Auswirkung auf Dekorationen, die von einem Vorfahren auferlegt werden; eine Dekorationsbox wird niemals über ihre eigene Boxdekoration zeichnen.

Formale Definition

Anfangswertobjects
Anwendbar aufalle Elemente
VererbtJa
Berechneter Wertwie angegeben
Animationstypdiskret

Formale Syntax

text-decoration-skip = 
none |
auto

Beispiele

Überspringen von Rändern

HTML

html
<p>Hey, grab a cup of <em>coffee!</em></p>

CSS

css
p {
  margin: 0;
  font-size: 3em;
  text-decoration: underline;
  text-decoration-skip: edges;
}

Ergebnis

Spezifikationen

Specification
CSS Text Decoration Module Level 4
# text-decoration-skipping

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
text-decoration-skip
Experimental
auto
Experimental
none
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

Siehe auch