Teksto dekoravimas-praleidimas-rašalas - CSS-gudrybės

Anonim

text-decoration-skip-inkyra savybė, valdanti elgesį underlineir overline(bet ne line-through), kai linija eina per simbolio / glifo dalį. Tai leidžia tiksliai sureguliuoti, kaip pabraukimas ar perbraukimas sąveikauja su simboliais, kurie tęsiasi virš eilutės viršaus arba pakimba žemiau eilutės apačios.

Anksčiau tai buvo tvarkoma naudojant text-decoration-skip: ink;nuosavybės / vertės derinį, tačiau po diskusijų apie tai, kaip spręsti stilių kaskadavimo problemą, netyčia perrašant žemesnio prioriteto stilius (dėl galimų parinkčių skaičiaus text-decoration-skip), atskiros ypatybės bus suskirstytos į naujas ypatybes panašus į text-decoration-skip-ink. Daugiau konteksto ir pavyzdžių, kodėl tai buvo pakeista, rasite šioje „GitHub“ diskusijoje ir CSS darbo grupės protokoluose, kuriuose aptariamos savybės.

Pagal numatytuosius nustatymus naršyklės „praleis“ sritis, kuriose simbolio „rašalas“ kerta pabraukimą, pavyzdžiui:

Galite pakeisti šį elgesį, norėdami priversti pabraukimą / perbrėžimą pereiti per simbolį, nustatydami text-decoration-skip-inkį none.

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

Dėl to eilutė pjaunama tiesiai per simbolius:

Sintaksė

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

Vertybės

text-decoration-skip-ink priima šias vertes:

  • auto yra numatytoji reikšmė ir „praleis“ pabraukimus / perbrėžimus, kai eis per simbolį.
  • none nukirps tą pabraukimą / perbrėžimą tiesiai per jūsų kabančius y ir aukštus t.

Pavyzdys

Žr
. CSS-Tricks (@ css-tricks) „CodePen “ rašiklio teksto dekoravimo-praleidimo rašalo pavyzdį .

Naršyklės palaikymas

Šie naršyklės palaikymo duomenys yra iš „Caniuse“, kuri turi daugiau informacijos. Skaičius rodo, kad naršyklė palaiko šios ir naujesnės versijos funkciją.

Darbalaukis

„Chrome“ „Firefox“ T.Y Briauna „Safari“
91 87 Ne 88 TP

Mobilusis / planšetinis kompiuteris

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

Susijęs

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

Ištekliai

  • MDN dokumentacija
  • Stiliaus pabrėžimas internete
  • Disleksijos vartotojai ir dažų praleidimo dažai