text-decoration

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Das text-decoration Attribut definiert, ob Text mit einer Unterstreichung, Überstrich und/oder Durchstreichung verziert wird. Es ist eine Kurzform für die Eigenschaften text-decoration-line und text-decoration-style.

Die Füllung und der Umriss des Textdekors werden durch die Füllung und den Umriss des Textes an dem Punkt bestimmt, an dem das Textdekor deklariert wird.

Die Malreihenfolge des Textdekors, d.h. die Füllung und Umriss, wird durch den Wert des paint-order Attributs an dem Punkt bestimmt, an dem das Textdekor deklariert wird.

Hinweis: Als Präsentationsattribut hat text-decoration auch eine Entsprechung als CSS-Eigenschaft: text-decoration. Wenn beides angegeben ist, hat die CSS-Eigenschaft Vorrang.

Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:

Beispiel

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="0 0 250 50" xmlns="http://www.w3.org/2000/svg">
  <text y="20" text-decoration="underline">Underlined text</text>
  <text x="0" y="40" text-decoration="line-through">Struck-through text</text>
</svg>

Verwendungshinweise

Wert	`<'text-decoration-line'>` \|\| `<'text-decoration-style'>` \|\| `<'text-decoration-color'>`
Standardwert	Siehe individuelle Eigenschaften
Animierbar	Ja

Für eine Beschreibung der Werte bitte auf die CSS text-decoration Eigenschaft verweisen.

Spezifikationen

Specification
CSS Text Decoration Module Level 3 # text-decoration-property
Scalable Vector Graphics (SVG) 2 # TextDecorationProperties

Browser-Kompatibilität

Siehe auch

CSS text-decoration Eigenschaft