Sõnavahe - CSS-trikid

Anonim

word-spacingVara on sarnane letter-spacing, kuigi loomulikult selle kasutamist reguleerib palju ruumi vahel sõnu tekstilõik, mitte üksikute tähemärki.

p ( word-spacing: 2em; )

word-spacing saab kolme erinevat väärtust:

  1. “tavaline” märksõna, mis lähtestab vaikevahe
  2. pikkuse väärtused mis tahes CSS-üksuste abil (kõige sagedamini px, em, rem)
  3. märksõna „pärima“, mis rakendab word-spacingvanemelemendi

Parim tava oleks praegu kasutada em. Fondi suurust saab reguleerida, nii et pikslite kasutamine võib tekitada probleeme sõnade vahekauguses, kuna nende suurus ei muutuks. remon tavaliselt suurepärane, kuid brauseri tugi on madalam ja sel juhul on ilmselt kõige parem, kui tühik on seotud otse sõnadega, millele seda rakendatakse, mitte juure.

Oluline on märkida, et sõna „sõna“ viitab selles kontekstis tegelikult ainsale sisemisele sisule - see tähendab, et see word-spacingmõjutab nii inline-blockelemente kui ka inlineelemente. Selles näites on mitu sellist elementi paigutatud word-spacingnende vanema konteineri seadistamise abil :

Vaadake seda pliiatsit!

Huvipunktid

  • word-spacingMajutusasutuse animatable CSS üleminekud.
  • Kuigi spetsifikatsiooni järgi on lubatud protsentuaalse väärtuse kasutamine vahekauguse määramiseks, võib see anda ettearvamatuid tulemusi - sageli puudub see lihtsalt.
  • Pimekoha nullimiseks seadmine on üks võimalusi inline plokielementide vahelise ruumi vastu võitlemiseks.

Brauseri tugi

Chrome Safari Firefox Ooper IE Android iOS
Töötab Töötab Töötab Töötab Töötab Enamik Töötab

Märkus Androidi brauseri toe kohta: valdav enamus Android-seadmeid toetab- word-spacingsiiski, mõned seadmed, mis kasutavad Webkiti mitte-Apple'i järku, või Netfront-brauser mitte. Spetsiifikat on üksikasjalikult kirjeldatud ülaltoodud lingil QuirksMode.