DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Die Eigenschaft text-decoration-style legt den Stil der Unterstreichung von Links und der Unterstreichung, Oberstreichung oder Durchstreichung für jeden Text fest, auf den text-decoration angewendet wird.
a {
text-decoration-style: solid;
}
Werte
solid: Der Standard. Die Dekoration ist eine einzelne durchgezogene Linie.double: Die Dekoration ist ein Paar von durchgezogenen Linien.dotted: Die Dekoration ist eine gepunktete Linie.dashed: Die Dekoration ist eine gestrichelte Linie.wavy: Die Dekoration ist eine wellenförmige Linie.
Demo
Zum Zeitpunkt der Erstellung dieses Textes wird text-decoration-style offiziell nur in Firefox unterstützt. Es funktioniert auch in Chrome-Browsern, wenn das Flag für experimentelle Webplattform-Funktionen aktiviert ist.
Kurzschreibweise
In Browsern, die text-decoration-style und text-decoration-color unterstützen, können Sie einer Kurzschreibweise text-decoration einen Dekorationsstil hinzufügen
.underlined {
text-decoration: underline dotted red;
}
Derzeit unterstützt nur Firefox dies ohne Präfix. Safari unterstützt es mit dem -webkit-Präfix. Chrome benötigt ebenfalls das -webkit-Präfix und aktivierte experimentelle Webplattform-Funktionen in den Chrome-Flags.
Weitere Informationen
Browser-Unterstützung
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 31 * | Keine | 6 † | Keine | Keine | Keine | Keine |
* Nur mit aktiviertem Flag für experimentelle Webplattform-Funktionen
† Firefox 6+ mit -moz Präfix, 36+ ohne Präfix.
Verwandt
text-decoration
.element { text-decoration: underline; }
text-decoration-color
.element { text-decoration-color: orange; }
text-decoration-line
.element { text-decoration-line: underline; }
text-decoration-skip
.element { text-decoration-skip: ink; }
text-decoration-skip-ink
.element {text-decoration-skip-ink: none; }
text-decoration-thickness
.element { text-decoration-thickness: 2px; }
Schöne Browserunterstützung… NICHT!
Kann es kaum erwarten, bis sie alles unterstützen. Ziemlich tolle neue Funktionen!!!
Autsch. Gibt es einen Grund, warum das nicht so gut unterstützt wird, wie es sein sollte?