CSS-Eigenschaft: text-decoration-line, Kategorien: Textdarstellung (allgemein), Text Decoration (CSS 3)
Linien zur Textdekoration
Steuert die Position der Linie, die zur Textdekoration (Zeilenverzierung) verwendet wird.
| Kurzbeschreibung | Werte | Standardwert | Kategorie | Hinweis |
|---|---|---|---|---|
| Linien zur Textdekoration |
| none |
| Neu in CSS 3 |
Verwandte Eigenschaften aus der Kategorie: Textdarstellung (allgemein), Text Decoration (CSS 3):
- hyphens
- letter-spacing
- line-break
- line-height
- line-stacking
- line-stacking-ruby
- line-stacking-shift
- line-stacking-strategy
- marquee-direction
- marquee-play-count
- marquee-speed
- marquee-style
- overflow-style
- overflow-wrap
- tab-size
- text-align
- text-align-last
- text-decoration
- text-decoration-color
- Aktuelle Seite: text-decoration-line
- text-decoration-skip
- text-decoration-style
- text-emphasis
- text-emphasis-color
- text-emphasis-position
- text-emphasis-style
- text-height
- text-indent
- text-justify
- text-overflow
- text-shadow
- text-transform
- text-underline-position
- white-space
- word-break
- word-spacing
- word-wrap
Folgendes ist beim Einsatz von text-decoration-line zu beachten:
text-decoration-line definiert eine Linie zur Textdekoration. Dabei stehen folgende Parameter
zur Verfügung:
none: Es wird keine Linie dargestellt (Standardwert).underline: Definiert eine Linie unter dem Text.overline: Definiert eine Linie über dem Text.line-through: Definiert eine Linie, die den Text durchstreicht.blink: Bewirkt, dass der Text blinkt.
Mit Ausnahme von none für text-decoration-line können alle Werte miteinander
kombiniert werden. Er sind also bis zu drei Textlinien möglich. Ist der Wert none unter
mehreren kombinierten Werten, werden die anderen Werte »deaktiviert«, es wird dann keine Linie angezeigt.
text-decoration-line gilt als Einzeleigenschaft für text-decoration.
text-decoration ist mit CSS 3 zur Kurzschreibweise geworden, im CSS 2.1 Standard stand die Eigenschaft
text-decoration für sich.
Damit ist text-decoration abwärtskompatibel. Neben text-decoration-line stehen
text-decoration-style und text-decoration-color
für die Kurzschreibweise zur Verfügung. Allerdings: Die drei einzelnen Eigenschaften werden vom Firefox mit Vendor-Präfix -moz- unterstützt,
text-decoration als die Kurzschreibweise mit drei Parametern wird von keinem Browser verstanden.
Die Browserunterstützung von text-decoration-line ist aktuell (September 2014) plump gesagt: miserabel.
Bis auf den Firefox, und das eben auch nur mit dem Präfix -moz- wird die Eigenschaft von keinem Browser
unterstützt. Auch wenn die Kollegen von caniuse.com für den Safari
ab der Version 7.1 eine teilweise Unterstützung signalisieren, funktioniert die Eigenschaft in der Praxis nicht.
Besonderheit blink:
Dieser Wert für text-decoration-line wurde erst später dem Standard des W3C hinzugefügt.
Allerdings weist das Mozilla Developer Network darauf hin, dass der Wert zwar
im Firefox implementiert ist und keine fehlerhafte Angabe ist, allerdings gilt blink bereits als
deprecated, also veraltet. Der Blink-Effekt sollte über die CSS-Eigenschaft
animation realisiert werden.
Der Standard-Entwurf für text-decoration-line hat sich im Laufe der Zeit stark verändert.
In früheren Versionen waren zusätzlich folgende Parameter vorgesehen:
no-underlinereplace-underlineno-overlinereplace-overlineno-line-throughreplace-line-throughremove-all
All diese Parameter sind ersatzlos aus dem W3C-Standard verschwunden.
 Firefox |  Chrome |  Internet Explorer |  Safari |  Opera |
|||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| CSS3 |
|
|
|
|
| ||||||||||||||||||||||||||||||||||||||||||
Weiterführende Informationen zu text-decoration-line:
- W3C Spezifikation:
http://www.w3.org/TR/css-text-decor-3/#text-decoration-line-property - Mozilla Developer Network:
https://developer.mozilla.org/de/docs/Web/CSS/text-decoration-line - Internet Explorer Developer Center:
http://msdn.microsoft.com/de-de/library/gg721770%28v=Expression.40%29.aspx
- letzte CSS-Eigenschaft (Acc-Key: ALT + SHIFT + z):
text-decoration-color - nächste CSS-Eigenschaft (Acc-Key: ALT + SHIFT + w):
text-decoration-skip
Beispiele
HTML:
<h2 id="example-1">text-decoration-line</h2>CSS:
#example-1 {
-moz-text-decoration-line: underline;
text-decoration-line: underline;
}
/* »underline« für »text-decoration-line« definiert die Unterstreichung des Textes,
wie man es von »text-decoration: underline« bereits kennt. */
Beispiel Nr. 1 So sieht's aus:
text-decoration-line
HTML:
<h2 id="example-2">text-decoration-line</h2>CSS:
#example-2 {
-moz-text-decoration-line: overline;
text-decoration-line: overline;
}
/* »overline« definiert eine Linie unter dem Text. */Beispiel Nr. 2 So sieht's aus:
text-decoration-line
HTML:
<h2 id="example-3">text-decoration-line</h2>CSS:
#example-3 {
-moz-text-decoration-line: line-through;
text-decoration-line: line-through;
}
/* »line-through« definiert eine Linie, welche den Text durchstreicht. */Beispiel Nr. 3 So sieht's aus:
text-decoration-line
HTML:
<h2 id="example-4">text-decoration-line</h2>CSS:
#example-4 {
-moz-text-decoration-line: underline overline;
text-decoration-line: underline overline;
}
/* Außer »none« können auch mehrere Werte kombiniert werden,
die Linien werden dann kombiniert angezeigt. Für »none« siehe Beispiel Nr. 6. */Beispiel Nr. 4 So sieht's aus:
text-decoration-line
HTML:
<h2 id="example-5">text-decoration-line</h2>CSS:
#example-5 {
-moz-text-decoration-line: underline overline line-through;
text-decoration-line: underline overline line-through;
}
/* Es können auch alle drei Werte kombiniert werden. */Beispiel Nr. 5 So sieht's aus:
text-decoration-line
HTML:
<h2 id="example-6">text-decoration-line</h2>CSS:
#example-6 {
-moz-text-decoration-line: underline none;
text-decoration-line: underline none;
}
/* Sobald der Wert »none« als einer der Werte vorhanden ist, werden alle anderen
Werte ignoriert. */Beispiel Nr. 6 So sieht's aus:
text-decoration-line
HTML:
<h2 id="example-7">text-decoration-line</h2>CSS:
#example-7 {
-moz-text-decoration-line: underline overline;
text-decoration-line: underline overline;
-moz-text-decoration-color: red;
text-decoration-color: red;
-moz-text-decoration-style: wavy;
text-decoration-style: wavy;
}
/* In Kombination mit den CSS 3-Eigenschaften »text-decoration-color« und
»text-decoration-style« können die Linien zusätzlich mit einer Farbe und
einem Linienstil versehen werden. */Beispiel Nr. 7 So sieht's aus:
text-decoration-line
HTML:
<h2 id="example-8">text-decoration-line</h2>CSS:
#example-8 {
-moz-text-decoration: underline wavy red;
text-decoration: underline wavy red;
}
/* Seit CSS3 dient text-decoration als Kurzschreibweise für die drei Einzeleigenschaften
»text-decoration-line«, »text-decoration-style« und »text-decoration-color«.
Allerdings wird diese von noch keinem Browser unterstützt.
*/Beispiel Nr. 8 So sieht's aus:
text-decoration-line
HTML:
<h2 id="example-9">text-decoration-line</h2>CSS:
#example-9 {
-moz-text-decoration-line: blink;
text-decoration-line: blink;
}
/* Der Wert »blink« wurde erst später als potentieller Wert definiert.
Laut Firefox wird er zwar als gültiger Wert erkannt, allerdings nicht unterstützt.
Der Wert hat also keine Auswirkung, auch wenn er syntaktisch korrekt ist.
*/Beispiel Nr. 9 So sieht's aus:
text-decoration-line
HTML:
<div id="testcase-vendor">
<h2 class="underline">underline</h2>
<h2 class="overline">overline</h2>
<h2 class="line-through">line-through</h2>
<h2 class="blink">blink</h2>
</div>CSS:
#testcase-vendor .underline {
-moz-text-decoration-line: underline;
-webkit-text-decoration-line: underline;
-o-text-decoration-line: underline;
-ms-text-decoration-line: underline;
}
#testcase-vendor .overline {
-moz-text-decoration-line: overline;
-webkit-text-decoration-line: overline;
-o-text-decoration-line: overline;
-ms-text-decoration-line: overline;
}
#testcase-vendor .line-through {
-moz-text-decoration-line: line-through;
-webkit-text-decoration-line: line-through;
-o-text-decoration-line: line-through;
-ms-text-decoration-line: line-through;
}
#testcase-vendor .blink {
-moz-text-decoration-line: blink;
-webkit-text-decoration-line: blink;
-o-text-decoration-line: blink;
-ms-text-decoration-line: blink;
}Testbeispiel: Schreibweise mit
Vendor-Präfix
underline
overline
line-through
blink
HTML:
<div id="testcase-standard">
<h2 class="underline">underline</h2>
<h2 class="overline">overline</h2>
<h2 class="line-through">line-through</h2>
<h2 class="blink">blink</h2>
</div>CSS:
#testcase-standard .underline {
text-decoration-line: underline;
}
#testcase-standard .overline {
text-decoration-line: overline;
}
#testcase-standard .line-through {
text-decoration-line: line-through;
}
#testcase-standard .blink {
text-decoration-line: blink;
}Testbeispiel: Standardschreibweise
underline
overline
line-through
blink
Fehler melden
Diese Referenz ist ein Freizeitprojekt ohne aufwendiges Lektorat oder Vergleichbarem. Von daher lassen sich bei dem Umfang dieser Referenz trotzt größtmöglicher Sorgfalt Fehler nicht vermeiden.
Hilf, die Qualität dieser Seite zu verbessern! Sollte Dir ein Fehler auffallen, sei es in den Erklärungen, Beispielen oder den Informationen zum Browsersupport, seien es orthographische oder grammatikalische, sende eine kurze E-Mail an info@css-wiki.com. Auch Anregungen und Verbesserungsvorschläge sind jeder Zeit Willkommen. Jede E-Mail wird persönlich beantwortet!
Vielen Dank!