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.
Die text-decoration-skip-ink CSS-Eigenschaft legt fest, wie Überstriche und Unterstriche gezeichnet werden, wenn sie über die Oberlängen und Unterlängen von Glyphen verlaufen.
Probieren Sie es aus
text-decoration-skip-ink: auto;
text-decoration-skip-ink: none;
<section id="default-example">
<p>
<span class="transition-all" id="example-element">parapsychologists</span>
</p>
</section>
p {
font:
1.9em "Georgia",
serif;
text-decoration: underline;
}
text-decoration-skip-ink ist kein Teil der text-decoration Kurzschreibweise.
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
none-
Unterstriche und Überstriche werden über die gesamte Länge des Textinhalts gezeichnet, einschließlich der Teile, die über die Unterlängen und Oberlängen von Glyphen verlaufen.
auto-
Der Standard — der Browser kann Unterstriche und Überstriche unterbrechen, sodass sie keine Glyphe berühren oder sich ihr nähern. Das bedeutet, sie werden unterbrochen, wo sie ansonsten eine Glyphe kreuzen würden.
all-
Der Browser muss Unterstriche und Überstriche unterbrechen, sodass sie keine Glyphe berühren oder sich ihr nähern. Dies kann bei bestimmten chinesischen, japanischen oder koreanischen (CJK) Schriftarten hilfreich sein, bei denen das
auto-Verhalten 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 class="no-skip-ink">Or maybe you'd prefer some tea?</p>
<p>この文は、 text-decoration-skip-ink: auto の使用例を示しています。</p>
<p class="skip-ink-all">
この文は、 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 |
Browser-Kompatibilität
Loading…