Textdekoration - CSS-Tricks

Anonim

Die text-decorationEigenschaft fügt dem ausgewählten Text eine Unterstreichung, Überstreichung, Durchleitung oder eine Kombination von Zeilen hinzu.

h3 ( text-decoration: underline; )

Werte

  • none: Es wird keine Linie gezeichnet und vorhandene Dekorationen werden entfernt.
  • underline: Zeichnet an der Grundlinie eine 1-Pixel-Linie über den Text.
  • line-through: Zeichnet eine 1px-Linie über den Text an seinem „Mittelpunkt“.
  • overline: Zeichnet eine 1-Pixel-Linie über den Text direkt über dem oberen Punkt.
  • inherit: erbt die Dekoration des Elternteils.

Der blinkWert befindet sich in der W3C-Spezifikation, ist jedoch veraltet und funktioniert in keinem aktuellen Browser. Wenn es funktionierte, ließ es den Text „blinken“, indem es schnell zwischen 0% und 100% Deckkraft umgeschaltet wurde.

Demo

Siehe die Stift-CSS-Tricks: Textdekoration durch CSS-Tricks (@ css-Tricks) auf CodePen.

Hinweise zur Verwendung

Sie können die Werte ,, oder in einer durch Leerzeichen getrennten Liste kombinieren underline, um mehrere Dekorationslinien hinzuzufügen:overlineline-through

p ( text-decoration: overline underline line-through; )

Standardmäßig erben die Zeile (n) die Farbe des Texts, die durch seine colorEigenschaft festgelegt wurde. Sie können dies in Browsern ändern, die die text-decoration-colorEigenschaft oder die Kurzwert-Eigenschaft mit drei Werten unterstützen.

text-decoration als Kurzschrift Eigentum

text-decorationkann in Kombination mit text-decoration-styleund text-decoration-colorals Kurzform 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 Vorzeichen. Safari unterstützt es mit dem -webkitPräfix. Chrome benötigt außerdem das -webkitPräfix und die experimentellen Webplattformfunktionen, die in Chrome-Flags aktiviert sind.

verbunden

  • text-decoration-color
  • text-decoration-line
  • text-decoration-style
  • text-decoration-skip

Mehr Informationen

  • Textdekoration als Abkürzungseigenschaft in der W3C-Spezifikation CSS Textdekorationsmodul Level 3 CR
  • Textdekoration bei MDN

Browser-Unterstützung

Alle Browser unterstützen die CSS2.1-Eigenschaft "longhand" text-decoration. Die Kurzschrift - Eigenschaft und die Untereigenschaften text-decoration-color, text-decoration-lineund text-decoration-styleunterstützten ohne Präfix in Firefox, und mit dem -webkitPräfix in Safari. Chrome erkennt diese Werte auch mit -webkitaktiviertem Präfix und aktiviertem Flag für experimentelle Webplattformen.

Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.

Desktop

Chrom Feuerfuchs IE Kante Safari
91 87 Nein 88 TP

Handy / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 81 14.0-14.4 *

* text-decorationvollständig unterstützt, Untereigenschaften mit -webkitPräfix unterstützt.
† Untereigenschaften erfordern zusätzlich das Aktivieren des Flags für experimentelle Webplattformfunktionen.
‡ Nur CSS2.1 text-decoration; Untereigenschaften werden nicht unterstützt.