CSS text-decoration-skip Eigenschaft
Die CSS-Eigenschaft text-decoration-skip legt fest, welche Inhaltsteile übersprungen werden. Eigenschaftswerte und Beispiele.
Die CSS-Eigenschaft text-decoration-skip sollte steuern, welche Teile des Inhalts eines Elements eine Textdekorationslinie (Unterstrich, Überstrich oder Durchstreichung) überspringen soll, anstatt sie zu durchziehen.
Sie galt für alle Dekorationslinien, die vom Element selbst gezeichnet werden, sowie für solche, die von Vorfahren geerbt wurden. Die Idee war, zu verhindern, dass ein Unterstrich Leerzeichen, ersetzte Elemente wie Bilder oder die Unterlängen von Buchstaben wie „g" und „y" durchschneidet.
In der Praxis wurde die Eigenschaft nie implementiert. Browser-Hersteller haben ihre Funktionalität in die dedizierte Eigenschaft text-decoration-skip-ink ausgelagert — die das Überspringen von Buchstabenglyphen steuert — und das ursprüngliche text-decoration-skip wurde aus der Spezifikation gestrichen. Diese Seite dokumentiert es zur Referenz; verwenden Sie es nicht in neuem Code.
Der Wert ink — der einzige Teil dieser Eigenschaft, der von Browsern jemals berücksichtigt wurde — wurde in die eigene Eigenschaft text-decoration-skip-ink verschoben. Das ist die Eigenschaft, die Sie heute fast sicher benötigen.
Wann verwenden
Niemals in neuen Projekten. text-decoration-skip ist veraltet und wird von keinem aktuellen Browser unterstützt, daher hat eine Deklaration keine Wirkung. Die zwei praktischen Schlussfolgerungen:
- Um zu verhindern, dass ein Unterstrich mit Buchstabenunterlängen kollidiert, verwenden Sie
text-decoration-skip-ink: auto(dies ist der moderne Standard). - Um Unterstriche selbst zu gestalten, verwenden Sie
text-decoration-line,text-decoration-color,text-decoration-styleoder das Kurzformattext-decoration.
text-decoration-skip kann Ihnen noch in älteren Stylesheets oder Tutorials begegnen — es zu erkennen (und zu wissen, dass es nichts bewirkt) ist der Hauptgrund, warum man es kennen sollte.
| Anfangswert | none |
|---|---|
| Anwendbar auf | Alle Elemente. |
| Vererbbar | Ja. |
| Animierbar | Nein. |
| Version | Entwurf (Veraltet) |
| DOM-Syntax | object.style.textDecorationSkip = "spaces"; |
Syntax
In der inzwischen entfernten Spezifikation war der Wert entweder das einzelne Schlüsselwort none oder ein oder mehrere durch Leerzeichen getrennte Schlüsselwörter aus der nachfolgenden Liste.
/* Single keyword */
text-decoration-skip: none;
text-decoration-skip: objects;
/* Multiple keywords */
text-decoration-skip: objects spaces;
text-decoration-skip: leading-spaces trailing-spaces edges;Beispiel der text-decoration-skip-Eigenschaft
Da kein Browser text-decoration-skip implementiert, wird der Unterstrich unten gerade durch alles gezogen — die Eigenschaft wird schlicht ignoriert. Das Beispiel wird aufbewahrt, um die historische Syntax zu zeigen:
CSS text-decoration-skip Codebeispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
margin: 1em;
color: #ccc;
font-size: 2em;
text-decoration: underline;
text-decoration-skip: edges;
}
</style>
</head>
<body>
<h2>Text-decoration-skip property example</h2>
<p>
<em>Lorem,</em>
<em>ipsum is simply dummy text</em>
</p>
</body>
</html>Ergebnis
Diese Eigenschaft ist veraltet und wird in modernen Browsern nicht unterstützt. Das Beispiel zeigt keine visuellen Änderungen.
Werte
| Wert | Beschreibung |
|---|---|
| none | Es wird kein Überspringen angewendet. Die Textdekoration wird für alle Textinhalte gezeichnet. |
| objects | Überspringt Dekorationen über ersetzte Elemente (wie Bilder) oder Inline-Block-Boxen. |
| spaces | Alle Leerzeichen werden übersprungen. |
| leading-spaces | Führende Leerzeichen werden übersprungen (Worttrennzeichen sowie führende Buchstabenabstände oder Wortabstände). |
| trailing-spaces | Nachfolgende Leerzeichen werden übersprungen (Worttrennzeichen sowie nachfolgende Buchstabenabstände oder Wortabstände). |
| edges | Der Anfang und das Ende jeder Dekorationslinie werden leicht vom Inhaltsrand der dekorierenden Box eingerückt, damit benachbarte Unterstriche nicht optisch zusammenlaufen. |
| box-decoration | Die Bereiche für Margin, Border und Padding der Box werden übersprungen. |
Browser-Kompatibilität
| Browser | Unterstützung |
|---|---|
| Chrome | Nie implementiert |
| Firefox | Nie implementiert |
| Safari | Nie implementiert |
| Edge | Nie implementiert |
| Opera | Nie implementiert |