DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Die text-decoration Eigenschaft fügt einen Unterstrich, Oberstrich, Durchstreich oder eine Kombination von Linien zum ausgewählten Text hinzu.
h3 {
text-decoration: underline;
}Werte
none: es wird keine Linie gezeichnet und vorhandene Dekorationen werden entfernt.underline: zeichnet eine 1px Linie über den Text auf seiner Grundlinie.line-through: zeichnet eine 1px Linie über den Text an seinem „mittleren“ Punkt.overline: zeichnet eine 1px Linie über den Text, direkt oberhalb seines „obersten“ Punkts.inherit: erbt die Dekoration des Elternelements.
Der Wert blink ist in der W3C-Spezifikation enthalten, aber er ist veraltet und wird in keinem aktuellen Browser funktionieren. Als er funktionierte, ließ er den Text erscheinen, als würde er schnell zwischen 0 % und 100 % Opazität wechseln.
Demo
Nutzungshinweise
Sie können die Werte underline, overline oder line-through in einer durch Leerzeichen getrennten Liste kombinieren, um mehrere Dekorationslinien hinzuzufügen
p {
text-decoration: overline underline line-through;
}Standardmäßig erben die Linie oder Linien die Farbe des Textes, wie sie durch die color Eigenschaft festgelegt ist. Sie können dies in Browsern ändern, die die Eigenschaft text-decoration-color oder die Drei-Wert-Kurzschrifteigenschaft unterstützen.
text-decoration als Kurzschrifteigenschaft
text-decoration kann in Kombination mit text-decoration-style und text-decoration-color als Kurzschrifteigenschaft verwendet werden
.fancy-underline {
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: red;
/* can be shortened to */
text-decoration: underline wavy 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.
Browser-Unterstützung
Alle Browser unterstützen die CSS2.1 „Longhand“-Eigenschaft text-decoration. Die Kurzschrifteigenschaft und die Untereigenschaften text-decoration-color, text-decoration-line und text-decoration-style werden in Firefox ohne Präfix und in Safari mit dem -webkit Präfix unterstützt. Chrome erkennt diese Werte auch mit dem -webkit Präfix und aktivierter Experimental Web Platforms Flagge.
Diese Daten zur Browserunterstützung stammen von Caniuse, wo Sie weitere Details finden. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version und aufwärts unterstützt.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 130 | 132 | Nein | 127 | TP |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 127 | 127 | 127 | 18.0* |
Weitere Informationen
text-decorationals Kurzschrifteigenschaft in der W3C-Spezifikation CSS Text Decoration Module Level 3 CRtext-decorationauf MDN
Verwandt
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-style
.element { text-decoration-style: wavy; }
text-decoration-thickness
.element { text-decoration-thickness: 2px; }
Bitte sagen Sie mir, wie ich Rechtsklick für **nur bestimmten Text** deaktivieren kann
wie ändere ich den Stil des Unterstrichs?
ich meine, die Farbe des Unterstrichs, die Größe usw. ändern.
Danke..
funktioniert nicht einmal in Canary 36. Die -moz-Entsprechung funktioniert in Firefox.
Wie wende ich diese Eigenschaft dann in Chrome an?
Ich bin verwirrt. Der Artikel besagt, dass dies nur in FF unterstützt wird, aber dann steht in der Tabelle darunter, dass es in allen wichtigen Browsern "funktioniert". Machen Sie mir hier falsche Hoffnung?
Meine Erfahrung ist, dass text-decoration-style und text-decoration-color nur in FF und nur mit dem -moz Präfix funktionieren.
Ich würde das gerne verwenden, da die Verwendung von border-bottom umständlich sein kann – und ich kann nicht glauben, dass dies in CSS2 nicht behandelt wurde, geschweige denn in CSS3.
Es stellt sich heraus, dass in Chrome (26+, soweit ich weiß) eine experimentelle Funktionsflagge aktiviert werden muss. Benutzer werden das nicht tun, selbst wenn Sie freundlich fragen. Daher unterstützt Chrome für die meisten Zwecke diese Funktion noch nicht.
Es ist technisch im Code enthalten, und Chrome kann es technisch unterstützen, aber praktisch niemand wird sehen, wie es funktioniert.
Das gleiche gilt für Opera, IE, Safari, Android, iOS, Dolphin, UC Browser, BlackBerry, WP8. Im Grunde unterstützen alle Browser außer (Desktop?) Firefox text-decoration-style nicht.
Diese Situation scheint sich langsam zu ändern. Safari 8 (in der Yosemite Developer Preview) unterstützt es jetzt teilweise: die Optionen
doubleundwavywerden gerendert (letzteres sieht aber hässlich aus), und die Eigenschafttext-decoration-colorwird ebenfalls unterstützt.Chrome unterstützt text-decoration-style nicht.,,… aber Firefox unterstützt.. Bitte helfen Sie mir für Chrome Browser…
Durch die Verwendung von inline-table und table-caption können wir die korrekte Positionierung eines Pseudo-Elements erzwingen, das eine korrekte Skalierung ermöglicht.
http://codepen.io/pohuski/pen/vEzxPj
Meine Erklärung auf StackOverflow
text-decoration-Spezifikationen sind noch in Entwicklung (http://www.w3.org/TR/css-text-decor-3/). alles mit diesen Untereigenschaften ist experimentell. Wenn Sie eine andere Farbe für Ihren Unterstrich benötigen, verwenden Sie ein zusätzliches Span-Element.
Danke – Nicht schlecht – ich sehe, wie ich das verwenden werde…
In Webkit funktioniert text-decoration-color nicht.. was für eine Schande! Ich dachte immer, wenn etwas woanders funktioniert, muss es auch in Webkit funktionieren.
Gibt es eine Möglichkeit, die Dicke des welligen Unterstrichs zu ändern?
Die Stil-Eigenschaft „text-decoration: none“ funktioniert gut in IE, aber in der Liste der unterstützten Browser sind „IE“ und „Edge“ als nicht unterstützt markiert. Gibt es dafür einen bestimmten Grund?
Was für eine Textdekoration ;)
Ich mochte text-decoration: red underline overline wavy;. Sieht wirklich fantastisch aus.