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 CSS-Eigenschaft text-decoration-skip-ink legt fest, wie Über- und Unterstreichungen gezeichnet werden, wenn sie über Ober- und Unterlängen von Glyphen verlaufen.
text-decoration-skip-ink ist nicht Teil der Kurzschreibweise text-decoration.
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;
}
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-
Unter- und Überstreichungen werden über die gesamte Länge des Textinhalts gezeichnet, einschließlich der Teile, die Ober- und Unterlängen von Glyphen kreuzen.
auto-
Der Standardwert — der Browser kann Unter- und Überstreichungen unterbrechen, damit sie eine Glyphe nicht berühren oder ihr zu nahe kommen. Das heißt, sie werden dort unterbrochen, wo sie andernfalls eine Glyphe kreuzen würden.
all-
Der Browser muss Unter- und Überstreichungen unterbrechen, damit sie eine Glyphe nicht berühren oder ihr zu nahe kommen. Dies kann bei bestimmten chinesischen, japanischen oder koreanischen (CJK-)Schriftarten hilfreich sein, bei denen das Verhalten von
automö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 |