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 CSS-Eigenschaft text-decoration-line legt die Art der Dekoration fest, die auf Text in einem Element verwendet wird, beispielsweise eine Unterstreichung oder Überstreichung.
Wenn mehrere Zeilendekorationseigenschaften gleichzeitig festgelegt werden, kann es praktischer sein, stattdessen die Kurzschreibweise text-decoration zu verwenden.
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;
}
Syntax
/* 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;
Werte
Diese Eigenschaft wird entweder als none oder als durch Leerzeichen getrennte Liste von Schlüsselwortwerten aus der folgenden Liste angegeben:
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 durch ihre Mitte.
blink-
Der Text blinkt (wechselt zwischen sichtbar und unsichtbar). Konforme User Agents müssen den Text möglicherweise nicht blinken lassen. Dieser Wert ist zugunsten von CSS-Animationen veraltet.
spelling-error-
Jede Textzeile verwendet die Methode des User Agents zum Hervorheben von Rechtschreibfehlern, die in den meisten Browsern aus einer gepunkteten roten Linie besteht.
grammar-error-
Jede Textzeile verwendet die Methode des User Agents zum Hervorheben von Grammatikfehlern, die in den meisten Browsern aus einer gepunkteten grünen Linie besteht.
Hinweis:
Bei Verwendung der Werte spelling-error und grammar-error ignoriert der Browser die anderen Eigenschaften in der Kurzschreibweise text-decoration (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
Grundlegendes Beispiel
<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>
.wavy {
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: red;
}
.both {
text-decoration-line: underline overline;
}
Beispiel für Fehler
In diesem Beispiel enthält der erste Absatz einen Rechtschreibfehler und verwendet die Browser-Stilgestaltung für Rechtschreibfehler beim falsch geschriebenen Wort. Der zweite Absatz verwendet die Browser-Stilgestaltung für Grammatikfehler. In Browsern, die diese text-decoration-line-Werte nicht unterstützen, gibt es keine Änderung der Stilgestaltung.
<p>This text contains a <span class="spelling">speling</span> mistake.</p>
<p class="grammar">This text contain grammatical errors.</p>
.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 Zeilendekorationseigenschaften gleichzeitig festgelegt werden, kann es praktischer sein, stattdessen die Kurzschreibweise
text-decorationzu verwenden, die außerdem Folgendes umfasst: text-underline-offset::spelling-error::grammar-error