Tekst-dekoration-spring-blæk - CSS-tricks

Anonim

text-decoration-skip-inker en egenskab, der styrer adfærden for underlineog overline(men ikke line-through), når linjen passerer gennem en del af et tegn / tegn. Dette giver dig finjusteret kontrol over, hvordan understregninger eller overstreg interagerer med de tegn, der strækker sig over toppen eller hænger under bunden af ​​en linje.

Tidligere blev dette håndteret via text-decoration-skip: ink;egenskab / værdi-kombinationen, men efter diskussioner om, hvordan man håndterer problemet med cascading-stilarter, der utilsigtet overskriver stilarter med lavere prioritet (på grund af antallet af tilgængelige muligheder text-decoration-skip), vil de enkelte egenskaber blive opdelt i nye egenskaber svarende til text-decoration-skip-ink. For mere sammenhæng og eksempler på, hvorfor dette blev ændret, se denne GitHub-diskussion og CSS-arbejdsgruppens referat, der diskuterer egenskaberne.

Som standard "springer" browsere over områder, hvor "blæk" i et tegn krydser en understregning, som sådan:

Du kan ændre denne adfærd for at tvinge understregningen / overlinjen til at gennemgå tegnet ved at indstille text-decoration-skip-inktil none.

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

Dette resulterer i, at linjen skærer gennem tegnene:

Syntaks

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

Værdier

text-decoration-skip-ink accepterer følgende værdier:

  • auto er standardværdien og vil "springe over" understregninger / overlinjer, når de passerer et tegn.
  • none vil skære den understrege / overstrege lige gennem dine dinglende y'er og høje t'er.

Eksempel

Se eksemplet
med pen-tekst-dekoration-spring over blæk af CSS-Tricks (@ css-tricks) på CodePen.

Browsersupport

Denne browsersupportdata er fra Caniuse, som har flere detaljer. Et tal angiver, at browseren understøtter funktionen i den version og opefter.

Desktop

Chrome Firefox IE Edge Safari
91 87 Ingen 88 TP

Mobil / tablet

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

Relaterede

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

Ressourcer

  • MDN-dokumentation
  • Styling Understreger på nettet
  • Dyslektiske brugere og understregning af skip-ink