Dietext-underline-positionCSS Eigenschaft legt die Position der Unterstreichung fest, die mithilfe desunderline Wertes dertext-decoration Eigenschaft gesetzt wird.

Probieren Sie es aus

text-underline-position: auto;

text-underline-position: under;

<section>  <p>    <span      >C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub></span    >    is the chemical formula for caffeine.  </p></section>

p {  font: 1.5em sans-serif;}#example-element {  text-decoration-line: underline;}

Syntax

/* Single keyword */text-underline-position: auto;text-underline-position: under;text-underline-position: left;text-underline-position: right;/* Multiple keywords */text-underline-position: under left;text-underline-position: right under;/* Global values */text-underline-position: inherit;text-underline-position: initial;text-underline-position: revert;text-underline-position: revert-layer;text-underline-position: unset;

Werte

auto

DerUser Agent verwendet seinen eigenen Algorithmus, um die Linie auf oder unter deralphabetischen Grundlinie zu platzieren.

from-font

Wenn die Schriftart-Datei Informationen über eine bevorzugte Position enthält, wird dieser Wert verwendet. Wenn die Schriftart-Datei diese Informationen nicht enthält, verhält es sich, als wäreauto gesetzt, wobei der Browser eine geeignete Position wählt.

under

Erzwingt, dass die Linie unter der alphabetischen Grundlinie gesetzt wird, an einer Position, an der sie keine Unterlängen kreuzt. Dies ist nützlich, um die Lesbarkeit bei chemischen und mathematischen Formeln zu gewährleisten, die häufig Tiefstellungen verwenden.

left

In vertikalen Schreibmodi erzwingt dieses Schlüsselwort, dass die Linie auf derlinken Seite des Textes platziert wird. In horizontalen Schreibmodi ist es ein Synonym fürauto.

right

In vertikalen Schreibmodi erzwingt dieses Schlüsselwort, dass die Linie auf derrechten Seite des Textes platziert wird. In horizontalen Schreibmodi ist es ein Synonym fürauto.

Formale Definition

Formale Syntax

text-underline-position =
auto|
[from-font|under]||[left|right]

Beispiele

Ein grundlegendes Beispiel

Wir erstellen zwei Beispielabsätze:

<p>  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consectetur ac  turpis vel laoreet. Nullam volutpat pharetra lorem, sit amet feugiat tortor  volutpat quis. Nam eget sodales quam. Aliquam accumsan tellus ac erat posuere.</p><p>  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consectetur ac  turpis vel laoreet. Nullam volutpat pharetra lorem, sit amet feugiat tortor  volutpat quis. Nam eget sodales quam. Aliquam accumsan tellus ac erat posuere.</p>

Unser CSS sieht so aus:

p {  font-size: 1.5rem;  text-transform: capitalize;  text-decoration: underline;  text-decoration-thickness: 2px;}.horizontal {  text-underline-position: under;}.vertical {  writing-mode: vertical-rl;  text-underline-position: left;}

In diesem Beispiel setzen wir bei beiden Absätzen eine dicke Unterstreichung. Im horizontalen Text verwenden wirtext-underline-position: under;, um die Unterstreichung unter allen Unterlängen zu platzieren.

Im Text mit einem vertikalenwriting-mode können wir dann die Werteleft oderright verwenden, um die Unterstreichung wie gewünscht links oder rechts vom Text erscheinen zu lassen.

Das Live-Beispiel sieht so aus:

Setzen der text-underline-position global

Da die Eigenschafttext-underline-position vererbt wird und nicht durch dietext-decoration Kurzform-Eigenschaft zurückgesetzt wird, kann es sinnvoll sein, ihren Wert global festzulegen. Zum Beispiel könnte der Wertunder für ein Dokument mit vielen chemischen und mathematischen Formeln geeignet sein, die häufig tiefgestellt sind.

:root {  text-underline-position: under;}

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Dietext-decoration Eigenschaft ist eine Kurzform zum Setzen der meisten Textdekorationseigenschaften, einschließlichtext-decoration-line,text-decoration-color, undtext-decoration-style. Sie setzt jedoch nichttext-underline-position.