Dietext-decoration-insetCSS Eigenschaft ermöglicht es, die Anfangs- und Endpunkte der Textdekoration eines Elements anzupassen, sodass sie verkürzt, verlängert oder ihre Position in Bezug auf den gerenderten Text verschoben werden kann.

Probieren Sie es aus

text-decoration-inset: 20px;

text-decoration-inset: -0.5em;

text-decoration-inset: 20px 1em;

text-decoration-inset: -0.5rem -1.5rem;

text-decoration-inset: -2ex 10vw;

<section>  <p>Karmadrome</p></section>

#example-element {  font: 2.5em sans-serif;  text-decoration: underline 0.3em limegreen;}

Syntax

/* auto keyword */text-decoration-inset: auto;/* One <length> value */text-decoration-inset: 20px;text-decoration-inset: -2rem;/* Two <length> values */text-decoration-inset: 20px 1em;text-decoration-inset: -0.5rem -1.5rem;text-decoration-inset: -2ex 1vw;/* Global values */text-decoration-inset: inherit;text-decoration-inset: initial;text-decoration-inset: revert;text-decoration-inset: revert-layer;text-decoration-inset: unset;

Werte

Ein oder zwei<length> Werte oder das Schlüsselwortauto.

<length>

Gibt die Menge an, um die die Position der Textdekoration angepasst werden soll. Positive Werte insetzen die Textdekoration (machen sie kürzer), während negative Werte die Textdekoration outsetzen (machen sie länger). Wenn ein Wert angegeben ist, gilt er sowohl für die Anfangs- als auch für die Endpunkte der Textdekoration. Wenn zwei Werte angegeben sind, gilt der erste für den Anfangspunkt und der zweite für den Endpunkt der Textdekoration.

auto

Der Browser wählt eine Menge für das Inset von Anfang und Ende, um sicherzustellen, dass, wenn zwei dekorierte Textboxen nebeneinander erscheinen, der Anschein einer Lücke zwischen ihren Textdekorationen entsteht, sodass sie nicht den Anschein haben, eine einzelne Textdekoration zu haben.

Beschreibung

Standardmäßig ist die Textdekoration eines Elements, wie durch die Abkürzungtext-decoration und die zugehörigen Langformeigenschaften festgelegt, gleich groß wie der gerenderte Text.

Die Eigenschafttext-decoration-inset ermöglicht es Ihnen, die Anfangs- und/oder Endpunkte der Textdekoration eines Textcontainers anzupassen. Dies ist nützlich, um Effekte zu erzeugen, bei denen Sie die Textdekoration insetzen oder outsetzen möchten oder in ihrer Position verschieben möchten. SieheGrundlegende Anwendungsfälle für ein Beispiel für jeden Fall.

Ein einzelner<length>-Wert setzt das Inset (wenn positiv) oder das Outset (wenn negativ) an den Anfangs- und Endpositionen der Textdekoration. Um die Anfangs- und Endpositionen separat festzulegen, können Sie zwei<length>-Werte verwenden — der erste bezieht sich auf die Startposition der Textdekoration und der zweite auf das Ende.

Die Eigenschafttext-decoration-inset kann auch das Schlüsselwortauto annehmen. Dadurch insetzt der Browser die Anfangs- und Endpunkte der Textdekoration, um sicherzustellen, dass, wenn zwei dekorierte Textboxen nebeneinander erscheinen, sie nicht den Anschein haben, eine einzige Textdekoration zu haben. Der Wertauto ist besonders wichtig beim Rendern chinesischer Texte, wo das Unterstreichen zurInterpunktion von Eigennamen verwendet wird und benachbarte Eigennamen separate Unterstreichungen haben sollten. SieheAuswirkung desauto-Wertes für ein Beispiel.

Der Wertauto hat nicht die gleiche Wirkung wie der Initialwert0. Wenntext-decoration-inset auf0 gesetzt wird, entsteht kein Abstand zwischen den Dekorationen.

Die Eigenschafttext-decoration-inset wird nicht vererbt und ist keine Bestandteil-Eigenschaft der Abkürzungtext-decoration.

Formale Definition

Formale Syntax

text-decoration-inset =
<length>{1,2}|
auto

Beispiele

Grundlegende Anwendungsfälle

In diesem Beispiel zeigen wir die Anwendungsfälle für Outset, Inset und "verschoben".

HTML

Wir definieren eine ungeordnete Liste mit drei Listeneinträgen, jeder mit einer separatenid.

<ul>  <li>Outset decoration</li>  <li>Inset decoration</li>  <li>Shifted decoration</li></ul>

CSS

Wir geben jedem Listeneintrag eine anderetext-decoration undtext-decoration-inset:

• Der erste hat eine dicke limettengrüne Unterstreichung, die auf beiden Seiten um10px outgesetzt wird.
• Der zweite hat einen mittelstarken weißen Durchstreichung, der auf beiden Seiten um0.5em insetzt wird.
• Der dritte hat eine dünne wellenförmige blaue Unterstreichung, die um1em nach rechts verschoben wird.

li {  font-family: sans-serif;  font-size: 2em;  margin-bottom: 20px;}@supports not (text-decoration-inset: auto) {  body::before {    content: "Your browser doesn't support the text-decoration-inset property.";    background-color: wheat;    display: block;    padding: 10px 0;    width: 100%;    text-align: center;  }}

#one {  text-decoration: underline 0.3em limegreen;  text-decoration-inset: -10px;}#two {  text-decoration: line-through 5px white;  text-decoration-inset: 0.5em;}#three {  text-decoration: underline wavy 2px blue;  text-decoration-inset: 1em -1em;}

Ergebnis

Dies wird wie folgt gerendert:

Auswirkung desauto-Wertes

Dieses Beispiel zeigt die Auswirkung des Wertestext-decoration-inset: auto.

HTML

Wir definieren zwei Gruppen von nebeneinander angeordneten<u>-Elementen:

<p lang="zh"><u>石井</u><u>艾俐俐</u></p><p lang="zh"><u>石井</u><u>艾俐俐</u></p>

CSS

Jedes<u>-Element hat einered-Farbe und eine3px-dicke Unterstreichung. Auf die erste Gruppe von<u>-Elementen ist der Werttext-decoration-inset: auto gesetzt, während auf die zweite Gruppe der Initialwerttext-decoration-inset: 0 explizit gesetzt ist, zum Vergleich:

u {  font-family: sans-serif;  font-size: 2em;}@supports not (text-decoration-inset: auto) {  body::before {    content: "Your browser doesn't support the text-decoration-inset property.";    background-color: wheat;    display: block;    padding: 10px 0;    width: 100%;    text-align: center;  }}

u {  text-decoration-color: red;  text-decoration-thickness: 3px;}#one u {  text-decoration-inset: auto;}#two u {  text-decoration-inset: 0;}

Ergebnis

Dies wird wie folgt gerendert:

Beachten Sie, wie derauto Wert die Textdekoration subtil auf beiden Seiten insetzt, wodurch eine Lücke zwischen den Unterstreichungen der beiden Elemente entsteht (zwischen den beiden Elementen selbst wird kein Abstand hinzugefügt). Der Wert0 führt zu keiner Lücke.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• text-decoration
• DasCSS-Textdekorationsmodul