text-decoration-skip
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig, bevor Sie diese produktiv verwenden.
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
/* 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-spacingoderword-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.)
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
| Initialer Wert | objects |
|---|---|
| Anwendbar auf | alle Elemente |
| Vererbt | Ja |
| Berechneter Wert | wie angegeben |
| Animationstyp | diskret |
Formale Syntax
text-decoration-skip =
none |
auto
Beispiele
Überspringen von Rändern
HTML
<p>Hey, grab a cup of <em>coffee!</em></p>
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
BCD tables only load in the browser