Teksti-sisustus-ohita-muste - CSS-temppuja

Anonim

text-decoration-skip-inkon ominaisuus, joka hallitsee käyttäytymistä underlineja overline(mutta ei line-through), kun viiva kulkee osan merkin / kuvion läpi. Tämä antaa sinulle tarkan hallinnan siitä, kuinka alleviivatut tai yliviivat ovat vuorovaikutuksessa merkkien kanssa, jotka ulottuvat rivin yläosan yläpuolelle tai roikkuvat sen alapuolelle.

Aikaisemmin tämä käsiteltiin text-decoration-skip: ink;ominaisuus / arvo-yhdistelmän kautta, mutta keskustelujen jälkeen siitä, miten kaskadointityylien ongelma hoidetaan tahattomasti korvaamalla alemman prioriteetin tyylit (käytettävissä olevien vaihtoehtojen määrän vuoksi text-decoration-skip), yksittäiset ominaisuudet jaetaan uusiksi ominaisuuksiksi samanlainen kuin text-decoration-skip-ink. Lisää kontekstia ja esimerkkejä siitä, miksi tätä muutettiin, on tässä GitHub-keskustelussa ja CSS-työryhmän keskusteluissa ominaisuuksista.

Oletuksena selaimet "ohittavat" alueet, joilla merkin "muste" ylittää alleviivan, kuten:

Voit muuttaa tätä käyttäytymistä pakottaaksesi alleviivauksen / yliviivan käymään läpi merkin asettamalla text-decoration-skip-inkkohtaan none.

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

Tämä johtaa viivan leikkaamiseen merkkien läpi:

Syntaksi

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

Arvot

text-decoration-skip-ink hyväksyy seuraavat arvot:

  • auto on oletusarvo ja "ohittaa" alleviivat / yliviivat kulkiessaan merkin läpi.
  • none leikkaa kyseisen alleviivan / yliviivan suoraan roikkuvien y: n ja korkeiden t: n kautta.

Esimerkki

Katso
CSS-Tricksin (@ css-tricks) kynä-teksti-decoration-skip-ink -esimerkki CodePenistä.

Selaimen tuki

Nämä selaintukitiedot ovat Caniuselta, jolla on tarkempia tietoja. Numero osoittaa, että selain tukee ominaisuutta kyseisessä versiossa tai uudemmassa.

Työpöytä

Kromi Firefox IE Reuna Safari
91 87 Ei 88 TP

Matkapuhelin / tabletti

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

Liittyvät

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

Resurssit

  • MDN-dokumentaatio
  • Viivojen muotoilu verkossa
  • Dysleksiset käyttäjät ja ohitusmusteviivat