Teksta noformēšana-izlaišanas tinte - CSS-triki

Anonim

text-decoration-skip-inkir īpašums, kas kontrolē uzvedību underlineun overline(bet ne line-through), kad līnija iet cauri rakstzīmes / glifa daļai. Tas ļauj precīzi kontrolēt, kā pasvītrojumi vai pasvītrojumi mijiedarbojas ar rakstzīmēm, kas stiepjas virs līnijas augšdaļas vai karājas zem apakšējās līnijas.

Iepriekš tas tika veikts, izmantojot text-decoration-skip: ink;rekvizītu / vērtību kombināciju, bet pēc diskusijām par to, kā rīkoties ar kaskādes stilu problēmu, nejauši pārrakstot zemākas prioritātes stilus (pieejamo opciju skaita dēļ text-decoration-skip), atsevišķie rekvizīti tiks sadalīti jaunos īpašumos līdzīgs text-decoration-skip-ink. Plašāku kontekstu un piemērus, kāpēc tas tika mainīts, skatiet šajā GitHub diskusijā un CSS darba grupas protokolā, kurā apspriesti rekvizīti.

Pēc noklusējuma pārlūkprogrammas “izlaidīs” apgabalus, kur rakstzīmes “tinte” šķērso pasvītrojumu, piemēram:

Varat mainīt šo uzvedību, lai piespiestu pasvītru / pārlaidumu iet cauri rakstzīmei, iestatot text-decoration-skip-inkuz none.

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

Tā rezultātā līnija tiek sagriezta tieši caur rakstzīmēm:

Sintakse

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

Vērtības

text-decoration-skip-ink pieņem šādas vērtības:

  • auto ir noklusējuma vērtība un, izlaižot rakstzīmi, tā “izlaidīs” pasvītrojumus / pasvītrojumus.
  • none iegriezīs šo pasvītrojumu / pārlaidumu tieši caur jūsu nokarenajiem y un garajiem t.

Piemērs

Skatiet
CSS-Tricks (@ css-tricks) pildspalvas teksta dekorēšanas-izlaišanas-tintes piemēru vietnē CodePen.

Pārlūka atbalsts

Šie pārlūka atbalsta dati ir no Caniuse, kurai ir sīkāka informācija. Cipars norāda, ka pārlūks atbalsta šo un jaunākās versijas funkciju.

Darbvirsma

Chrome Firefox IE Mala Safari
91 87 Nē 88 TP

Mobilais / planšetdators

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

Saistīts

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

Resursi

  • MDN dokumentācija
  • Pasvītrojumu veidošana tīmeklī
  • Disleksijas lietotāji un izlaižamās tintes pasvītrojumi