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 Text in einem Element angewendet wird, wie zum Beispiel ein Unterstrich oder eine Überlinie.
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;
}
Beim gleichzeitigen Setzen mehrerer Linien-Dekorationseigenschaften kann es praktischer sein, die verkürzte Eigenschaft text-decoration zu verwenden.
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 untenstehenden Liste angegeben:
none-
Es wird keine Textdekoration erzeugt.
underline-
Jede Textzeile hat eine dekorative Linie unterhalb.
overline-
Jede Textzeile hat eine dekorative Linie oberhalb.
line-through-
Jede Textzeile hat eine dekorative Linie, die durch ihre Mitte verläuft.
blink-
Der Text blinkt (wechselt zwischen sichtbar und unsichtbar). Übereinstimmende Nutzeragenten lassen den Text möglicherweise nicht blinken. Dieser Wert ist veraltet zugunsten von CSS-Animationen.
spelling-error-
Jede Textzeile verwendet die Methode des Nutzeragenten, um Rechtschreibfehler hervorzuheben, was in den meisten Browsern eine gepunktete rote Linie ist.
grammar-error-
Jede Textzeile verwendet die Methode des Nutzeragenten, um Grammatikfehler hervorzuheben, was in den meisten Browsern eine gepunktete grüne Linie ist.
Hinweis:
Bei der Verwendung der Werte spelling-error und grammar-error ignoriert der Browser die anderen Eigenschaften in der text-decoration-Verkürzung (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
<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;
}
Fehlerbeispiel
In diesem Beispiel enthält der erste Absatz einen Rechtschreibfehler und nutzt das Styling des Browsers für Rechtschreibfehler beim falsch geschriebenen Wort. Der zweite Absatz verwendet das Styling des Browsers für Grammatikfehler. Es gibt keine Stylingänderung in Browsern, die diese text-decoration-line-Werte nicht unterstützen.
<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
- Beim gleichzeitigen Setzen mehrerer Linien-Dekorationseigenschaften kann es praktischer sein, die verkürzte Eigenschaft
text-decorationzu verwenden, die auch folgende umfasst: text-underline-offset::spelling-error::grammar-error