Tekst-decoratie-overslaan-inkt - CSS-trucs

Anonim

text-decoration-skip-inkis een eigenschap die het gedrag van underlineen overline(maar niet line-through) regelt wanneer de regel een deel van een teken / glyph passeert. Dit geeft u nauwkeurig afgestelde controle over hoe onderstrepingen of overlijnen omgaan met de tekens die boven de bovenkant uitsteken of onder de onderkant van een regel hangen.

Eerder werd dit afgehandeld via de text-decoration-skip: ink;eigenschap / waarde-combinatie, maar na discussies over hoe om te gaan met het probleem van trapsgewijze stijlen die onbedoeld stijlen met een lagere prioriteit overschrijven (vanwege het aantal beschikbare opties text-decoration-skip), worden de individuele eigenschappen opgesplitst in nieuwe eigenschappen vergelijkbaar met text-decoration-skip-ink. Zie deze GitHub-discussie en de notulen van de CSS-werkgroep waarin de eigenschappen worden besproken voor meer context en voorbeelden waarom dit is gewijzigd.

Standaard zullen browsers gebieden overslaan waar de "inkt" van een teken een onderstreping kruist, zoals:

U kunt dit gedrag wijzigen om de onderstreping / bovenlijn door het teken te dwingen door in te stellen text-decoration-skip-inkop none.

.line-of-text-thats-already-underlined ( text-decoration-skip-ink: none; )

Dit resulteert erin dat de lijn dwars door de karakters snijdt:

Syntaxis

text-decoration-skip-ink: auto | none;

Waarden

text-decoration-skip-ink accepteert de volgende waarden:

  • auto is de standaardwaarde en zal onderstrepingen / lijnen "overslaan" bij het passeren van een teken.
  • none zal die onderstreping / bovenlijn dwars door je bungelende y's en lange t's heen snijden.

Voorbeeld

Zie het Pen text-decoration-skip-ink-voorbeeld
door CSS-Tricks (@ css-tricks) op CodePen.

Browser-ondersteuning

Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.

Bureaublad

Chrome Firefox D.W.Z Rand Safari
91 87 Nee 88 TP

Mobiel / tablet

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

Verwant

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

Middelen

  • MDN-documentatie
  • Styling onderstrepen op het web
  • Dyslectische gebruikers en overslaan van inkt onderstreept