Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
text-decoration-skip-ink
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since März 2022.
* Some parts of this feature may have varying levels of support.
Dietext-decoration-skip-inkCSS Eigenschaft legt fest, wie Overlines und Underlines gezogen werden, wenn sie über die Ober- und Unterlängen von Glyphen verlaufen.
Probieren Sie es aus
text-decoration-skip-ink: auto;text-decoration-skip-ink: none;<section> <p> <span>parapsychologists</span> </p></section>p { font: 1.9em "Georgia", serif; text-decoration: underline;}text-decoration-skip-ink ist nicht Teil dertext-decoration Kurzform.
Syntax
/* Single keyword */text-decoration-skip-ink: none;text-decoration-skip-ink: auto;text-decoration-skip-ink: all;/* Global keywords */text-decoration-skip-ink: inherit;text-decoration-skip-ink: initial;text-decoration-skip-ink: revert;text-decoration-skip-ink: revert-layer;text-decoration-skip-ink: unset;Werte
noneUnderlines und Overlines werden über die gesamte Länge des Textinhalts gezogen, einschließlich der Teile, die über die Unter- und Oberlängen von Glyphen verlaufen.
autoDer Standard — der Browserkann Underlines und Overlines unterbrechen, so dass sie keinen Glyphen berühren oder sich diesen nähern. Das heißt, sie werden unterbrochen, wo sie sonst eine Glyphe überqueren würden.
allDer Browsermuss Underlines und Overlines unterbrechen, so dass sie keinen Glyphen berühren oder sich diesen nähern. Dies kann bei bestimmten chinesischen, japanischen oder koreanischen (CJK) Schriftarten hilfreich sein, bei denen das
autoVerhalten möglicherweise keine Unterbrechungen erzeugt.
Formale Definition
| Anfangswert | auto |
|---|---|
| Anwendbar auf | alle Elemente |
| Vererbt | Ja |
| Berechneter Wert | wie angegeben |
| Animationstyp | diskret |
Formale Syntax
text-decoration-skip-ink =
auto|
none|
all
Beispiele
HTML
<p>You should go on a quest for a cup of coffee.</p><p>Or maybe you'd prefer some tea?</p><p>この文は、 text-decoration-skip-ink: auto の使用例を示しています。</p><p> この文は、 text-decoration-skip-ink: all の使用例を示しています。</p>CSS
p { font-size: 1.5em; text-decoration: underline blue; text-decoration-skip-ink: auto; /* this is the default anyway */}.no-skip-ink { text-decoration-skip-ink: none;}.skip-ink-all { text-decoration-skip-ink: all;}Ergebnis
Spezifikationen
| Specification |
|---|
| CSS Text Decoration Module Level 4 # text-decoration-skip-ink-property |