Der eigene Online-Shop für Profi-Fotografen. Für Fotografen, die keine Zeit zu verlieren haben.

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.

CSS-Eigenschaft: text-decoration-line
KurzbeschreibungWerteStandardwertKategorieHinweis
Linien zur Textdekoration
  • none
  • underline
  • overline
  • line-through
  • blink
none
Allgemein:
Textdarstellung
CSS 3:
Text Decoration
Neu in CSS 3
 

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.

text-decoration-line: underline, overline, line-through
text-decoration-line: Darstellung bei underline, overline, line-through

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-underline
  • replace-underline
  • no-overline
  • replace-overline
  • no-line-through
  • replace-line-through
  • remove-all

All diese Parameter sind ersatzlos aus dem W3C-Standard verschwunden.

Browserunterstützung von text-decoration-line
Firefox
Firefox
Google Chrome
Google
Chrome
Internet Explorer
Internet
Explorer
Safari
Safari
Opera
Opera
CSS3
Version: 16Version: 25Version: 30Version: 31Version: 32
-moz-
Version: 20Version: 30Version: 35Version: 36Version: 37
n
Version: 8Version: 9Version: 10Version: 11
n
Version: 4Version: 5Version: 6Version: 7
n
Version: 10Version: 11Version: 12
n

Weiterführende Informationen zu text-decoration-line:



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 nur für: Firefox
-moz-: 6

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 nur für: Firefox
-moz-: 6

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 nur für: Firefox
-moz-: 6

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 nur für: Firefox
-moz-: 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 nur für: Firefox
-moz-: 6

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 nur für: Firefox
-moz-: 6

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 nur für: Firefox
-moz-: 6

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;
}
Beispiel nur für: Firefox
-moz-: 6

Testbeispiel: Schreibweise mit
Vendor-Präfix

underline

overline

line-through

 

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

 

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!

A-Z:

Schnell­auswahl

Seiten:

Letzte Änderung: 01. 04. 2017
Render Time: 6.324 sec.

Browser-Marktanteile