text-decoration-skip-ink CSS property
Baseline
Weitgehend verfügbar
*
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit März 2022 browserübergreifend verfügbar.
* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.
Die text-decoration-skip-ink CSS Eigenschaft bestimmt, wie Über- und Unterstriche gezeichnet werden, wenn sie über 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 nicht 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
Diese Eigenschaft wird als einer der folgenden Schlüsselwortwerte angegeben:
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-
Standardmäßig kann der Browser Unterstriche und Überstriche unterbrechen, sodass sie eine Glyphe nicht berühren oder sich ihr annähern. Das heißt, sie werden unterbrochen, wo sie sonst über eine Glyphe verlaufen würden.
all-
Der Browser muss Unterstriche und Überstriche unterbrechen, sodass sie eine Glyphe nicht berühren oder sich ihr annähern. Dies kann bei bestimmten chinesischen, japanischen oder koreanischen (CJK) Schriftarten nützlich 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 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
| Spezifikation |
|---|
| CSS Text Decoration Module Level 4 # text-decoration-skip-ink-property |