Tekstikaunistus-vahele tint - CSS-trikid

Anonim

text-decoration-skip-inkon omadus, mis kontrollib underlineja overline(kuid mitte line-through), kui joon läbib osa tähemärgist / glüüfist. See annab teile täpse kontrolli selle üle, kuidas allajoonitud või ülejoonitud suhtlevad rea ülaosast ülespoole ulatuvate või allpool rippuvate märkidega.

Varem tehti seda text-decoration-skip: ink;omaduste / väärtuste kombinatsiooni kaudu, kuid pärast arutelu selle üle, kuidas käituda kaskaadstiilide probleemiga, tahtmatult madalama prioriteediga stiilide üle kirjutades (olemasolevate valikute arvu tõttu text-decoration-skip), jagatakse üksikud atribuudid uuteks omadusteks sarnane text-decoration-skip-ink. Lisateavet konteksti ja näidete kohta, miks seda muudeti, leiate sellest GitHubi arutelust ja CSS-i töörühma protokollidest, kus arutatakse atribuute.

Vaikimisi jätavad brauserid vahele alad, kus märgi „tint” ületab joone, näiteks:

Saate seda käitumist muuta, et sundida joon / joon üle märgi läbima, seadistades text-decoration-skip-inkväärtusele none.

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

Selle tulemuseks on rea lõikamine läbi märkide:

Süntaks

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

Väärtused

text-decoration-skip-ink aktsepteerib järgmisi väärtusi:

  • auto on vaikeväärtus ja jätab märgi läbimisel allajoonimise / allajoonimise vahele.
  • none lõikab selle joone / rida otse läbi rippuvate y-de ja pikkade t-de.

Näide

Vaadake
CodePenilt CSS-Tricksi (@ css-tricks) näidet Pliiatsi teksti kaunistamine-vahelejätmine .

Brauseri tugi

Need brauseri tugiandmed pärinevad Caniuse'ilt, millel on üksikasjalikum teave. Number näitab, et brauser toetab selle versiooni ja uuemat funktsiooni.

Töölaud

Chrome Firefox IE Edge Safari
91 87 Ei 88 TP

Mobiil / tahvelarvuti

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

Seotud

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

Ressursid

  • MDN dokumentatsioon
  • Alljoonimiste kujundamine veebis
  • Düsleksiliste kasutajate ja vahelejäetava tindi allajoonimine