Text-decoration-skip-ink - CSS-trükkök

Anonim

text-decoration-skip-inkolyan tulajdonság, amely vezérli a viselkedést underlineés overline(de nem line-through), amikor a vonal áthalad egy karakter / karakterjel egy részén. Ez finomhangolást biztosít Önnek arról, hogy az aláhúzások vagy az aláhúzások hogyan hatnak a karakterekre, amelyek a sor teteje fölé nyúlnak vagy az alja alatt lógnak.

Korábban ezt a text-decoration-skip: ink;tulajdonság / érték kombinációval kezelték , de miután megvitatták, hogy miként kezelhetők a lépcsőzetes stílusok problémája, ha akaratlanul felülírják az alacsonyabb prioritású stílusokat (a rendelkezésre álló opciók száma miatt text-decoration-skip), az egyes tulajdonságokat új tulajdonságokra bontják. hasonló a text-decoration-skip-ink. További összefüggéseket és példákat arra, hogy miért változtattak ezen, olvassa el a GitHub beszélgetést és a CSS munkacsoport jegyzőkönyveit a tulajdonságokról.

Alapértelmezés szerint a böngészők „kihagyják” azokat a területeket, ahol a karakter „tintája” keresztezi az aláhúzást, így:

Meg lehet változtatni ezt a viselkedést kényszeríteni az aláhúzás / overline átmenni a karakter beállításával text-decoration-skip-inkaz none.

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

Ez azt eredményezi, hogy a sor közvetlenül a karaktereken keresztül vágódik:

Szintaxis

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

Értékek

text-decoration-skip-ink a következő értékeket fogadja el:

  • auto az alapértelmezett érték, és az karakterek áthaladásakor „kihagyja” az aláhúzásokat / aláhúzásokat.
  • none levágja ezt az aláhúzást / aláhúzást közvetlenül a lógó y-d és a magas t-eden keresztül.

Példa

Lásd a
CSS-Tricks (@ css-tricks) Toll szövegdekoráció-skip-ink példáját a CodePen-en.

Böngésző támogatás

Ez a böngésző támogatási adat a Caniuse cégtől származik, amely részletesebben szerepel. Egy szám azt jelzi, hogy a böngésző támogatja az adott és újabb verziók szolgáltatásait.

Asztal

Króm Firefox AZAZ Él Szafari
91. 87 Nem 88 TP

Mobil / Tablet

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

Összefüggő

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

Erőforrások

  • MDN dokumentáció
  • Az aláhúzások stílusa az interneten
  • Diszlexiás felhasználók és az ugró-tinta aláhúzások