Text-Dekoration-Überspringen - CSS-Tricks

Anonim

Die text-decoration-skipEigenschaft gibt an, wo ein Text unterstrichen, überstrichen oder durchgestrichen werden soll. Dies verbessert die Lesbarkeit von dekoriertem Text und korrigiert die Interpunktionsgrammatik für einige Sprachen.

Hier ist ein Beispiel:

a ( text-decoration-skip: ink; )

Kopf hoch! Der inkWert wurde in eine völlig neue Eigenschaft geändert text-decoration-skip-ink: auto;.

Wenn Ihr Browser diese Eigenschaft unterstützt, werden Sie hier feststellen, dass die Nachkommen jedes Zeichens (wie "y" und "p") kleine Leerzeichen um den Rand haben:

Siehe das Überspringen der Stifttextdekoration durch CSS-Tricks (@ css-Tricks) auf CodePen.

Wenn Ihr Browser diese Funktion nicht unterstützt, sollten Sie Folgendes von der Eigenschaft in einem unterstützenden Browser erwarten:

Text-Dekoration-Überspringen Illustration

text-decoration-skip in OSX und iOS

Ende 2014 nahm Apple text-decorationin Safari- und iOS-Browsern eine Änderung vor, die die Funktionsweise nachahmt text-decoration-skip: ink;. Obwohl noch keiner der text-decoration-skipWerte offiziell implementiert ist, können Sie dieses Standardverhalten mit deaktivieren -webkit-text-decoration-skip: none;.

Siehe den Stift-Webkit-Text-Dekoration-überspringen: keine; von CSS-Tricks (@ css-Tricks) auf CodePen.

verbunden

  • text-decoration
  • text-decoration-color
  • text-decoration-line
  • text-decoration-style

Mehr Informationen

  • CSS Text Decoration Module Level 4
    Editor's Draft
  • text-decoration-skip bei MSDN.
  • Diskussion über das Hinzufügen trailing-spacesals Wert aus der W3C-Mailingliste.
  • Verbesserung der Lesbarkeit von Text für Legastheniker mit Unterstreichung durch Überspringen von Tinte
  • Text-Dekoration-Skip auf MDN
  • Text-Dekoration-Skip-Ink auf MDN

Browser-Unterstützung

Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.

Desktop

Chrom Feuerfuchs IE Kante Safari
91 87 Nein 88 TP

Handy / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 81 14.0-14.4 *