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 July 2015.

* Some parts of this feature may have varying levels of support.

Die text-decoration-skip-ink CSS Eigenschaft gibt an, wie Über- und Unterstreichungen gezeichnet werden, wenn sie über die Auf- und Abstriche von Glyphen verlaufen.

Probieren Sie es aus

text-decoration-skip-ink ist kein Bestandteil der text-decoration Kurznotation.

Syntax

css
/* 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

Unter- und Überstriche werden über die gesamte Länge des Textinhalts gezeichnet, einschließlich der Teile, die über die Auf- und Abstriche von Glyphen verlaufen.

auto

Der Standardwert — der Browser kann Unter- und Überstriche unterbrechen, damit sie eine Glyphe nicht berühren oder sich ihr eng nähern. Das bedeutet, dass sie dort unterbrochen werden, wo sie sonst über eine Glyphe verlaufen würden.

all

Der Browser muss Unter- und Überstriche unterbrechen, damit sie eine Glyphe nicht berühren oder sich ihr eng nähern. Dies kann bei bestimmten chinesischen, japanischen oder koreanischen (CJK) Schriften hilfreich sein, bei denen das auto Verhalten möglicherweise keine Unterbrechungen erzeugt.

Ein Beispiel für "text-decoration-skip-ink".

Formale Definition

Anfangswertauto
Anwendbar aufalle Elemente
VererbtJa
Berechneter Wertwie angegeben
Animationstypdiskret

Formale Syntax

text-decoration-skip-ink = 
auto |
none |
all

Beispiele

HTML

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

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
text-decoration-skip-ink
all
auto
none

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.

Siehe auch