text-decoration-inset

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 id="default-example">
  <p id="example-element">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üsselwort auto.

<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ürzung text-decoration und die zugehörigen Langformeigenschaften festgelegt, gleich groß wie der gerenderte Text.

Die Eigenschaft text-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. Siehe Grundlegende 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 Eigenschaft text-decoration-inset kann auch das Schlüsselwort auto 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 Wert auto ist besonders wichtig beim Rendern chinesischer Texte, wo das Unterstreichen zur Interpunktion von Eigennamen verwendet wird und benachbarte Eigennamen separate Unterstreichungen haben sollten. Siehe Auswirkung des auto-Wertes für ein Beispiel.

Der Wert auto hat nicht die gleiche Wirkung wie der Initialwert 0. Wenn text-decoration-inset auf 0 gesetzt wird, entsteht kein Abstand zwischen den Dekorationen.

Die Eigenschaft text-decoration-inset wird nicht vererbt und ist keine Bestandteil-Eigenschaft der Abkürzung text-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 separaten id.

<ul>
  <li id="one">Outset decoration</li>
  <li id="two">Inset decoration</li>
  <li id="three">Shifted decoration</li>
</ul>

CSS

Wir geben jedem Listeneintrag eine andere text-decoration und text-decoration-inset:

• Der erste hat eine dicke limettengrüne Unterstreichung, die auf beiden Seiten um 10px outgesetzt wird.
• Der zweite hat einen mittelstarken weißen Durchstreichung, der auf beiden Seiten um 0.5em insetzt wird.
• Der dritte hat eine dünne wellenförmige blaue Unterstreichung, die um 1em 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 des auto-Wertes

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

HTML

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

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

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

CSS

Jedes <u>-Element hat eine red-Farbe und eine 3px-dicke Unterstreichung. Auf die erste Gruppe von <u>-Elementen ist der Wert text-decoration-inset: auto gesetzt, während auf die zweite Gruppe der Initialwert text-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 der auto 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 Wert 0 führt zu keiner Lücke.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• text-decoration
• Das CSS-Textdekorationsmodul