`text-decoration-line` CSS property

Baseline Weitgehend verfügbar *

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Januar 2020 browserübergreifend verfügbar.

* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.

Die text-decoration-line CSS Eigenschaft legt die Art der Dekoration fest, die auf den Text in einem Element angewendet wird, wie z.B. eine Unterstreichung oder eine Überstreichung.

Probieren Sie es aus

text-decoration-line: none;

text-decoration-line: underline;

text-decoration-line: overline;

text-decoration-line: line-through;

text-decoration-line: grammar-error;

text-decoration-line: spelling-error;

text-decoration-line: underline overline;

text-decoration-line: underline line-through;

<section id="default-example">
  <p>
    I'd far rather be
    <span class="transition-all" id="example-element">happy than right</span>
    any day.
  </p>
</section>

p {
  font: 1.5em sans-serif;
}

Wenn mehrere Zeilendekorations-Eigenschaften gleichzeitig festgelegt werden, kann es bequemer sein, die Kurzform text-decoration zu verwenden.

Syntax

css

/* Single keyword */
text-decoration-line: none;
text-decoration-line: underline;
text-decoration-line: overline;
text-decoration-line: line-through;
text-decoration-line: blink;
text-decoration-line: spelling-error;
text-decoration-line: grammar-error;

/* Multiple keywords */
text-decoration-line: underline overline; /* Two decoration lines */
text-decoration-line: overline underline line-through; /* Multiple decoration lines */

/* Global values */
text-decoration-line: inherit;
text-decoration-line: initial;
text-decoration-line: revert;
text-decoration-line: revert-layer;
text-decoration-line: unset;

Die text-decoration-line Eigenschaft wird als none angegeben oder einer oder mehrere durch Leerzeichen getrennte Werte aus der unten stehenden Liste.

Werte

none: Erzeugt keine Textdekoration.
underline: Jede Textzeile hat eine dekorative Linie darunter.
overline: Jede Textzeile hat eine dekorative Linie darüber.
line-through: Jede Textzeile hat eine dekorative Linie, die durch die Mitte verläuft.
blink: Der Text blinkt (wechselt zwischen sichtbar und unsichtbar). Übereinstimmende User Agents lassen den Text möglicherweise nicht blinken. Dieser Wert ist zugunsten von CSS-Animationen veraltet.
spelling-error: Jede Textzeile verwendet die Methode des User Agents zur Hervorhebung von Rechtschreibfehlern, was in den meisten Browsern eine gepunktete rote Linie ist.
grammar-error: Jede Textzeile verwendet die Methode des User Agents zur Hervorhebung von Grammatikfehlern, was in den meisten Browsern eine gepunktete grüne Linie ist.

Hinweis: Wenn Sie die Werte spelling-error und grammar-error verwenden, ignoriert der Browser die anderen Eigenschaften in der text-decoration Kurzform (wie text-underline-position, color oder stroke).

Formale Definition

Anfangswert	`none`
Anwendbar auf	alle Elemente. Auch anwendbar auf `::first-letter` und `::first-line`.
Vererbt	Nein
Berechneter Wert	wie angegeben
Animationstyp	diskret

Formale Syntax

text-decoration-line = 
  none                                                |
  [ underline || overline || line-through || blink ]  |
  spelling-error                                      |
  grammar-error

Beispiele

Einfaches Beispiel

html

<p class="wavy">Here's some text with wavy red underline!</p>
<p class="both">This text has lines both above and below it.</p>

css

.wavy {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;
}

.both {
  text-decoration-line: underline overline;
}

Fehlerbeispiel

In diesem Beispiel enthält der erste Absatz einen Rechtschreibfehler und verwendet das Styling des Browsers für Rechtschreibfehler auf dem falsch geschriebenen Wort. Der zweite Absatz verwendet das Styling des Browsers für Grammatikfehler. In Browsern, die diese text-decoration-line Werte nicht unterstützen, gibt es keine Stiländerung.

html

<p>This text contains a <span class="spelling">speling</span> mistake.</p>
<p class="grammar">This text contain grammatical errors.</p>

css

.spelling {
  text-decoration-line: spelling-error;
}

.grammar {
  text-decoration-line: grammar-error;
}

Spezifikationen

Spezifikation
CSS Text Decoration Module Level 3 # text-decoration-line-property

Browser-Kompatibilität

Siehe auch

Wenn mehrere Zeilendekorations-Eigenschaften gleichzeitig festgelegt werden, kann es bequemer sein, die Kurzform text-decoration zu verwenden, die auch folgende einschließt:
text-underline-offset
::spelling-error
::grammar-error

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

text-decoration-line CSS property

Help improve MDN

`text-decoration-line` CSS property