Atstarpes starp vārdiem - CSS-triki

Anonim

word-spacingĪpašums ir līdzīga letter-spacing, lai gan, protams, tā izmantošanu regulē daudzumu telpā starp vārdiem kādu tekstu, nevis atsevišķas rakstzīmes.

p ( word-spacing: 2em; )

word-spacing var saņemt trīs dažādas vērtības:

  1. “parastais” atslēgvārds, kas atiestata noklusējuma atstarpi
  2. garuma vērtības, izmantojot jebkuras CSS vienības (visbiežāk px, em, rem)
  3. atslēgvārds “mantot”, kas lieto word-spacingvecākelementa

Labākā prakse šajā laikā būtu izmantot em. Fonta lielumu var pielāgot, tāpēc pikseļu izmantošana tam varētu radīt problēmas ar atstarpi starp vārdiem, kā to lielums. remparasti ir lielisks, taču pārlūkprogrammas atbalsts ir mazāks, un šajā lietošanas gadījumā, visticamāk, atstarpe ir tieši saistīta ar vārdiem, kuriem tā tiek lietota, nevis saknei.

Ir svarīgi atzīmēt, ka “vārds” šajā kontekstā faktiski attiecas uz atsevišķu iekšējā satura gabalu, kas nozīmē, ka tas word-spacingietekmē gan inline-blockelementus, gan inlineelementus. Šajā piemērā vairāki šādi elementi ir izvietoti, iestatot word-spacingvecāku konteineru:

Pārbaudiet šo pildspalvu!

Apskates vietas

  • word-spacingĪpašums ir animatable ar CSS pārejām.
  • Lai gan atstarpes noteikšanai ir atļauts izmantot “procentuālo” vērtību, kā norādīts specifikācijā, tas var dot neparedzamus rezultātus - bieži vien to vispār nav.
  • Baltās atstarpes iestatīšana uz nulli ir viens no veidiem, kā cīnīties pret atstarpi starp iekļautajiem bloku elementiem.

Pārlūka atbalsts

Chrome Safari Firefox Opera IE Android iOS
Darbi Darbi Darbi Darbi Darbi Lielākā daļa Darbi

Piezīme par Android pārlūkprogrammas atbalstu: lielākā daļa Android ierīču atbalsta, word-spacingtomēr dažas ierīces, kurās tiek izmantoti WebKit versijas, kas nav Apple versijas, vai Netfront pārlūks to nedara. Specifika ir detalizēta iepriekšminētajā saitē QuirksMode.