text-underline-position
Die text-underline-position
CSS Eigenschaft legt die Position der Unterstreichung fest, die mit dem underline
-Wert der text-decoration
Eigenschaft gesetzt wird.
Probieren Sie es aus
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
-
Der User Agent verwendet seinen eigenen Algorithmus, um die Linie auf oder unter der alphabetischen Grundlinie zu platzieren.
from-font
-
Wenn die Schriftdatei Informationen über eine bevorzugte Position enthält, wird dieser Wert verwendet. Wenn die Schriftdatei diese Informationen nicht enthält, wird so gehandelt, als ob
auto
gesetzt wäre, 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 tiefgestellte Zeichen verwenden.
left
-
In vertikalen Schreibmodi erzwingt dieses Schlüsselwort, dass die Linie auf der linken Seite des Textes platziert wird. Im horizontalen Schreibmodus ist es ein Synonym für
auto
. right
-
In vertikalen Schreibmodi erzwingt dieses Schlüsselwort, dass die Linie auf der rechten Seite des Textes platziert wird. Im horizontalen Schreibmodus ist es ein Synonym für
auto
.
Formale Definition
Initialer Wert | auto |
---|---|
Anwendbar auf | alle Elemente |
Vererbt | Ja |
Berechneter Wert | wie angegeben |
Animationstyp | diskret |
Formale Syntax
Beispiele
Ein einfaches Beispiel
Lassen Sie uns ein paar einfache Beispielabsätze betrachten:
<p class="horizontal">
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 class="vertical">
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 folgendermaßen 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 beide Absätze auf eine dicke Unterstreichung. Im horizontalen Text verwenden wir text-underline-position: under;
, um die Unterstreichung unter die gesamten Unterlängen zu setzen.
Im Text mit einem vertikalen writing-mode
können wir dann die Werte left
oder right
verwenden, um die Unterstreichung je nach Bedarf links oder rechts vom Text erscheinen zu lassen.
Das Live-Beispiel sieht so aus:
Globale Einstellung von text-underline-position
Da die text-underline-position
Eigenschaft vererbt wird und nicht durch die text-decoration
Kurzschreibweise zurückgesetzt wird, kann es sinnvoll sein, ihren Wert auf globaler Ebene festzulegen. Zum Beispiel kann der Wert under
für ein Dokument mit vielen chemischen und mathematischen Formeln, die häufig tiefgestellte Zeichen verwenden, geeignet sein.
:root {
text-underline-position: under;
}
Spezifikationen
Specification |
---|
CSS Text Decoration Module Level 3 # text-underline-position-property |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
- Die
text-decoration
Eigenschaft ist eine Kurzschreibweise zum Festlegen der meisten Textdekorationseigenschaften, einschließlichtext-decoration-line
,text-decoration-color
, undtext-decoration-style
. Sie setzt jedoch nichttext-underline-position
.