Übersicht
Die text-underline-position CSS Eigenschaft legt die Position der Linie einer Unterstreichung, die über die text-decoration-Eigenschaft mit dem Wert underline gesetzt wurde, fest.
Diese Eigenschaft wird vererbt und nicht von text-decoration zurückgesetzt, wodurch sie auch für das gesamte Dokument festgelegt werden kann:
:root { /* nützlich für Dokumente mit vielen chemischen Formeln */
text-underline-position: under;
}
| Initialwert | auto |
|---|---|
| Anwendbar auf | alle Elemente |
| Vererbt | Ja |
| Medien | visuell |
| Berechneter Wert | wie angegeben |
| Animationstyp | diskret |
| Kanonische Reihenfolge | Reihenfolge des Auftretens in der formalen Grammatik der Werte |
Syntax
/* Schlüsselwortwerte */ text-underline-position: auto; text-underline-position: under; text-underline-position: left; text-underline-position: right; text-underline-position: under left; text-underline-position: right under; /* Globale Werte */ text-underline-position: inherit; text-underline-position: initial; text-underline-position: unset;
Werte
auto- Der Browser verwendet einen Algorithmus, um zwischen
underund der Grundlinie zu unterscheiden. under- Die Linie wird unterhalb der Grundlinie, wo keine Unterlängen berührt werden, gesetzt. Dies ist nützlich, um zu verhindern, dass chemische oder mathematische Formeln, die oft Tiefstellungen enthalten, schwer lesbar werden.
left- In vertikalen Schreibrichtungen wird die Linie auf der linken Seite der Zeichen platziert. In horizontalen Schreibrichtungen ist dies ein Synonym für
under. right- In vertikalen Schreibrichtungen wird die Linie auf der rechten Seite der Zeichen platziert. In horizontalen Schreibrichtungen ist dies ein Synonym für
under. auto-pos- Dies ist ein Synonym für
autound sollte nicht verwendet werden. above- Die Linie wird über dem Text gesetzt. In ostasiatischem Text führt der Wert
autozum gleichen Ergebnis. below- Die Linie wird unter dem Text gesetzt. In aus Buchstaben bestehendem Text führt der Wert
autozum gleichen Ergebnis.
Formale Syntax
auto | [ under || [ left | right ] ]
Spezifikationen
| Spezifikation | Status | Kommentar |
|---|---|---|
| Unknown Die Definition von 'text-underline-position' in dieser Spezifikation. |
Unbekannt | Ursprüngliche Definition |
Browser Kompatibilität
Update compatibility data on GitHub
| Desktop | Mobile | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
text-underline-position | Chrome Vollständige Unterstützung 33 | Edge Vollständige Unterstützung 12 | Firefox Keine Unterstützung Nein | IE Vollständige Unterstützung 6 | Opera Keine Unterstützung Nein | Safari Keine Unterstützung Nein | WebView Android Vollständige Unterstützung 4.4.3 | Chrome Android Vollständige Unterstützung 33 | Edge Mobile Vollständige Unterstützung 12 | Firefox Android Keine Unterstützung Nein | Opera Android Keine Unterstützung Nein | Safari iOS Keine Unterstützung Nein | Samsung Internet Android Keine Unterstützung Nein |
under | Chrome Vollständige Unterstützung 33 | Edge Keine Unterstützung Nein | Firefox Keine Unterstützung Nein | IE Keine Unterstützung Nein | Opera Keine Unterstützung Nein | Safari Keine Unterstützung Nein | WebView Android Vollständige Unterstützung 4.4.3 | Chrome Android Vollständige Unterstützung 33 | Edge Mobile Keine Unterstützung Nein | Firefox Android Keine Unterstützung Nein | Opera Android Keine Unterstützung Nein | Safari iOS Keine Unterstützung Nein | Samsung Internet Android Keine Unterstützung Nein |
left and right | Chrome Vollständige Unterstützung 71 | Edge Keine Unterstützung Nein | Firefox Keine Unterstützung Nein | IE Keine Unterstützung Nein | Opera Keine Unterstützung Nein | Safari Keine Unterstützung Nein | WebView Android Vollständige Unterstützung 71 | Chrome Android Vollständige Unterstützung 71 | Edge Mobile Keine Unterstützung Nein | Firefox Android Keine Unterstützung Nein | Opera Android Keine Unterstützung Nein | Safari iOS Keine Unterstützung Nein | Samsung Internet Android Keine Unterstützung Nein |
above and below | Chrome Keine Unterstützung Nein | Edge Vollständige Unterstützung 12 | Firefox Keine Unterstützung Nein | IE Vollständige Unterstützung 6 | Opera Keine Unterstützung Nein | Safari Keine Unterstützung Nein | WebView Android Keine Unterstützung Nein | Chrome Android Keine Unterstützung Nein | Edge Mobile Vollständige Unterstützung 12 | Firefox Android Keine Unterstützung Nein | Opera Android Keine Unterstützung Nein | Safari iOS Keine Unterstützung Nein | Samsung Internet Android Keine Unterstützung Nein |
auto-pos | Chrome Keine Unterstützung Nein | Edge Vollständige Unterstützung 12 | Firefox Keine Unterstützung Nein | IE Vollständige Unterstützung 6 | Opera Keine Unterstützung Nein | Safari Keine Unterstützung Nein | WebView Android Keine Unterstützung Nein | Chrome Android Keine Unterstützung Nein | Edge Mobile Vollständige Unterstützung 12 | Firefox Android Keine Unterstützung Nein | Opera Android Keine Unterstützung Nein | Safari iOS Keine Unterstützung Nein | Samsung Internet Android Keine Unterstützung Nein |
Legende
- Vollständige Unterstützung
- Vollständige Unterstützung
- Keine Unterstützung
- Keine Unterstützung
- Experimentell. Das Verhalten kann sich zukünftig ändern.
- Experimentell. Das Verhalten kann sich zukünftig ändern.
- Nicht standardisiert. Erwarte schlechte browserübergreifende Unterstützung.
- Nicht standardisiert. Erwarte schlechte browserübergreifende Unterstützung.
Siehe auch
- Verwandte CSS-Eigenschaften:
text-decoration,text-decoration-line,text-decoration-style,text-decoration-color. - Microsoft-Dokumentation der nicht-standardisierten Werte (englisch).