Cilnes lielums - CSS-triki

Anonim

tab-sizeĪpašums CSS tiek izmantota, lai pielāgotu summas telpu, kas displeja par tabulēšanas rakstzīmi.

pre ( tab-size: 8; /* default. Pretty big! */ tab-size: 2; tab-size: 13px; /* you can set a width-per-tab also */ )

Spēlējiet ar šiem diapazona slīdņiem, lai redzētu, kā dažādas vērtības ietekmē ciļņu renderēšanu (kad cilnes faktiski var redzēt):

Skatiet
Kriss Koijera (@chriscoyier) Pen Pen rNBLYaP
par CodePen.

Cilnes raksturs (unikods U + 0009) parasti tiek pārveidots par atstarpēm (unikoda U + 0020), izmantojot atstarpes apstrādes kārtulas, un pēc tam tiek sakļauts, lai pārlūkprogrammā tiktu parādīta tikai viena atstarpe pēc kārtas. Tāpēc tab-sizerekvizīts ir noderīgs tikai tad, ja neattiecas baltās vietas apstrādes noteikumi, proti, iekš a

tagu un kad white-spaceelementa rekvizīts ir iestatīts uz pre-wrap.

Īpašuma noklusējuma vērtība tab-sizeir 8 atstarpes rakstzīmes, un tā var pieņemt jebkuru pozitīvu vesela skaitļa vērtību.


Viņš ir daži piemēri dažādiem izmantošanas veidiem tab-size:


Skatiet
Kriss Koijera (@chriscoyier) Pen Pen rNBLYjg
vietnē CodePen.





Kā redzat iepriekšējos piemēros, tab-sizerekvizīts pielāgo cilnes rakstzīmei atvēlētās vietas daudzumu. Otrajā piemērā


tagam ir white-spacejāpielāgo tā rekvizīts pre-wrap, lai cilnes rakstzīmes netiktu pārvērstas parastajās atstarpēs un nesakļautas.


CSS jūs pamanīsit arī to, ka Firefox un Opera ir nepieciešami prefiksi -moz-un -o-prefiksi, taču Chrome pieņem nepielikto versiju.


Polyfill


Astoņu vietu noklusējums ir šausmīgi liels. Ja jums ir jāatbalsta neatbalstīta pārlūkprogramma, varat izmantot šo aizpildījumu (JavaScript šajā pildspalvveida pilnšļircē):


Skatiet
CSS-Tricks cilnes izmēra pildspalvas aizpildīšanu, izmantojot CSS-Tricks (@ css-tricks)
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 


 

 

 

 42 53 * Nē 79 13.1 


 

 



Mobilais / planšetdators


 

 

 Android Chrome Android Firefox Android iOS Safari 


 

 

 

 88 85 * 81. 13.4-13.7 


 

 



Šis īpašums degradējas ļoti graciozi. Katrs pārlūks atbalsta cilnes rakstzīmes. Atbalsta trūkums šim īpašumam neko neizjauc, pārlūkprogramma tā vietā parāda tikai astoņu rakstzīmju platas cilnes.