Tekst-dekorasjon-hopp over blekk - CSS-triks

Anonim

text-decoration-skip-inker en egenskap som styrer atferden til underlineog overline(men ikke line-through) når linjen passerer gjennom en del av et tegn / tegn. Dette gir deg finjustert kontroll over hvordan understreker eller overlinjer samhandler med tegnene som strekker seg over toppen eller henger under bunnen av en linje.

Tidligere ble dette håndtert via text-decoration-skip: ink;eiendom / verdi-kombinasjonen, men etter diskusjoner om hvordan man skal håndtere problemet med cascading-stiler som utilsiktet overskriver stiler med lavere prioritet (på grunn av antall tilgjengelige alternativer text-decoration-skip), vil de enkelte egenskapene bli delt inn i nye egenskaper. ligner på text-decoration-skip-ink. For mer sammenheng og eksempler på hvorfor dette ble endret, se denne GitHub-diskusjonen og CSS-arbeidsgruppeminuttene som diskuterer egenskapene.

Som standard vil nettlesere "hoppe over" områder der "blekk" til et tegn krysser en understreking, slik:

Du kan endre denne oppførselen for å tvinge understreken / overlinjen til å gå gjennom tegnet ved å sette text-decoration-skip-inktil none.

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

Dette resulterer i at linjen skjærer rett gjennom tegnene:

Syntaks

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

Verdier

text-decoration-skip-ink aksepterer følgende verdier:

  • auto er standardverdien og vil "hoppe over" understreker / overstreker når du går gjennom et tegn.
  • none vil kutte den understreken / overstreken rett gjennom de dinglende yene og de høye t-ene.

Eksempel

Se eksemplet
på pennetekst -dekorasjon-hopp over blekk av CSS-Tricks (@ css-tricks) på CodePen.

Nettleserstøtte

Disse nettleserstøttedataene er fra Caniuse, som har flere detaljer. Et tall indikerer at nettleseren støtter funksjonen i den versjonen og oppover.

Desktop

Chrome Firefox DVS Kant Safari
91 87 Nei 88 TP

Mobil / nettbrett

Android Chrome Android Firefox Android iOS Safari
88 85 81 14,0-14,4 *

I slekt

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

Ressurser

  • MDN-dokumentasjon
  • Styling Understreker på nettet
  • Dyslektiske brukere og oversprøytede blekkstreker