Die text-decoration-thicknessEigenschaft in CSS legt die Strichstärke der Dekorationslinie fest, die für Text in einem Element verwendet wird. Der text-decoration-lineWert Bedürfnisse entweder underline, line-throughoder overlinedie Dicke Eigenschaft zu reflektieren.
.text ( text-decoration-line: underline; text-decoration-thickness: 2px; )Syntax
auto | from-font | | Werte
auto: (Standard) Ermöglicht dem Browser, eine geeignete Dicke für die Textdekorationslinie anzugeben.from-font: Wenn die erste verfügbare Schriftart Metriken enthält, die eine bevorzugte Dicke angeben, wird diese Dicke verwendet. Andernfalls verhält es sich wie der automatische Wert.: Jede gültige Länge mit einer Einheit gibt die Dicke der Textdekorationslinien als feste Länge an. Dies ersetzt alle Informationen in der Schriftart und im Browser-Standard.percentage: Gibt die Dicke der Textdekorationslinien als Prozentsatz von 1em in der Schriftart des Elements an.initial: Die Standardeinstellung der Eigenschaft ist auto.inherit: Übernimmt den Wert für die Dekorationsdicke des Elternteils.unset: Entfernt die aktuelle Dicke vom Element.
Demo
Ändern Sie den Wert von text-decoration-thicknessin der folgenden Demo, um zu sehen, wie sich die Eigenschaft auf die Textdekoration des Elements auswirkt:
Es ist konstant für Nachkommen
Nachdem Sie eine Dekoration für ein Element festgelegt haben, haben auch alle untergeordneten Elemente diese Dekoration. Stellen Sie sich nun vor, wir möchten die Dicke der Dekoration für eines der Kinder ändern:
p ( text-decoration-line: underline; text-decoration-color: green; text-decoration-thickness: 0.2em; )
p span ( text-decoration-thickness: 0.1em; /* Doesn't work */ )Dies funktioniert nicht, da die von den Vorfahrenelementen angegebene Dekorationsdicke nicht überschrieben werden kann. Damit dies funktioniert, muss für das Element selbst eine Dekorationsspezifität festgelegt werden:
p ( text-decoration-line: underline; text-decoration-color: green; text-decoration-thickness: 0.2em; ) p span ( text-decoration-line: underline; text-decoration-color: green; text-decoration-thickness: 0.1em; /* It works! */ )Prozentsatz und die Kaskade
Für diese Eigenschaft wird eine Länge als fester Wert geerbt und nicht mit der Schriftart skaliert. Auf der anderen Seite wird ein Prozentsatz als relativer Wert geerbt und daher mit Änderungen in der Schriftart beim Erben skaliert.
p ( text-decoration-thickness: 20%; )
p span ( font-size: 20px; text-decoration-line: underline; text-decoration-thickness: inherit; /* = 20% */ )Die folgende Demo zeigt den Vergleich zwischen der Verwendung von em und Prozentwerten bei Vererbung. Wie Sie sehen können, hat der geerbte Wert auf der linken Seite (in der wir em verwenden) eine feste Länge. Das heißt, es skaliert nicht mit der Änderung der Schriftart. Auf der rechten Seite erbt der Text jedoch einen relativen Wert (in diesem Fall 20%). Daher skaliert die Dicke mit der Änderung der Schriftart.
Während der aktuelle Arbeitsentwurf der Spezifikation auf Prozentwerte für verweist text-decoration-thickness, ist die tatsächliche Unterstützung derzeit auf Firefox beschränkt.
Verwenden mit text-decoration
Der aktuelle Arbeitsentwurf der Spezifikation des CSS-Textdekorationsmoduls der Stufe 4 enthält text-decoration-thicknessals Wert die text-decorationKurzschrift-Eigenschaft.
.link ( text-decoration: underline solid green 1px; )
/* The longhand equivalent */ .link ( text-decoration-line: underline; text-decoration-style: solid; text-decoration-color: green, text-decoration-thickness: 1px; )Obwohl dies text-decorationgut unterstützt wird, ist die Unterstützung für die Aufnahme von text-decoration-thicknessderzeit auf Firefox beschränkt.
Browser-Unterstützung
| Merkmal | IE | Kante | Feuerfuchs | Chrom | Safari | Oper |
|---|---|---|---|---|---|---|
| Eigentum | Nein | Nein | 70 | Nein | 12.1 | Nein |
| Prozentsätze | Nein | Nein | 76 | Nein | Nein | Nein |
| Kurzschrift | Nein | Nein | 70 | Nein | Nein | Nein |
| Merkmal | Android Chrome | Android Firefox | Android Browser | iOS Safari | Opera Mini |
|---|---|---|---|---|---|
| Eigentum | Nein | Nein | Nein | 12.2 | Nein |
| Prozentsätze | Nein | Nein | Nein | Nein | Nein |
| Kurzschrift | Nein | Nein | Nein | Nein | Nein |
Anmerkungen
- Die Eigenschaft wurde früher aufgerufen
text-decoration-width, wurde jedoch im Arbeitsentwurf 2019 der Spezifikation des CSS-Textdekorationsmoduls Stufe 4 aktualisiert. - Der Browser muss eine Mindestdicke von 1 Gerätepixel verwenden.