Tekst-ukras-preskoči-tinta - CSS-trikovi

Anonim

text-decoration-skip-inkje svojstvo koje kontrolira ponašanje underlinei overline(ali ne i line-through) kada linija prolazi kroz dio znaka / glifa. To vam daje precizno podešenu kontrolu nad međusobnim podcrtavanjem ili nadcrtavanjem znakova koji se protežu iznad vrha ili vise ispod dna retka.

Prije se to rješavalo putem text-decoration-skip: ink;kombinacije svojstvo / vrijednost, ali nakon rasprava o tome kako riješiti problem kaskadnih stilova nenamjerno prepisujući stilove nižeg prioriteta (zbog broja dostupnih opcija text-decoration-skip), pojedina svojstva bit će podijeljena u nova svojstva slično kao text-decoration-skip-ink. Za više konteksta i primjere zašto je to promijenjeno, pogledajte ovu raspravu o GitHubu i zapisnike CSS-ove radne skupine koji raspravljaju o svojstvima.

Prema zadanim postavkama, preglednici će "preskočiti" područja na kojima "tinta" znaka prelazi podvučenu crtu, na sljedeći način:

Možete promijeniti ovo ponašanje kako biste prisilili podcrtavanje / prevlačenje da prolazi kroz znak postavljanjem text-decoration-skip-inkna none.

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

To rezultira presijecanjem crte točno kroz znakove:

Sintaksa

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

Vrijednosti

text-decoration-skip-ink prihvaća sljedeće vrijednosti:

  • auto je zadana vrijednost i "preskočit" će podcrtavanje / podcrtavanje prilikom prolaska kroz znak.
  • none izrezati će tu podvučenu crtu pravo kroz vaše viseće y-ove i visoke t-ove.

Primjer

Pogledajte primjer olovke text-decoration-skip-ink
tvrtke CSS-Tricks (@ css-tricks) na CodePen-u.

Podrška preglednika

Podaci o podršci preglednika potječu iz tvrtke Caniuse, koja sadrži više detalja. Broj označava da preglednik podržava značajku u toj verziji i novijoj.

Radna površina

Krom Firefox IE Rub Safari
91 87 Ne 88 TP

Mobitel / tablet

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

Povezano

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

Resursi

  • MDN dokumentacija
  • Podcrtavanje stila na webu
  • Korisnici s disleksijom i preskakanje tinte podvlače