Velikost zavihka - CSS-triki

Anonim

tab-sizeHotel v CSS se uporabljajo za prilagoditev višine prostorov, ki prikaza za znak kartici.

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

Poigrajte se s temi drsniki obsega, da vidite, kako različne vrednosti vplivajo na upodabljanje zavihkov (ko zavihke dejansko vidite):

Oglejte si Pen
rNBLYaP Chrisa Coyierja (@chriscoyier)
na CodePen.

Znak zavihka (unicode U + 0009) se s pravili za obdelavo presledkov običajno pretvori v presledke (unicode U + 0020) in nato strne, tako da je v brskalniku prikazan samo en presledek v vrstici. Zato je tab-sizelastnost uporabna samo, če pravila za obdelavo praznine ne veljajo, in sicer znotraj a

tag in ko je white-spacelastnost elementa nastavljena na pre-wrap.

Privzeta vrednost tab-sizelastnosti je 8 presledkov in lahko sprejme katero koli pozitivno celoštevilsko vrednost.


Tu je nekaj primerov različnih načinov tab-sizeuporabe:


Oglejte si Pen
rNBLYjg Chrisa Coyierja (@chriscoyier)
na CodePen.





Kot lahko vidite v zgornjih primerih, tab-sizelastnost prilagodi količino prostora, dodeljenega znaku zavihka. V drugem primeru je


white-spacelastnost oznake mora biti prilagojena, pre-wrapda se znaki zavihka ne bodo pretvorili v običajne presledke in strnili.


V CSS-ju boste opazili tudi, da sta predponi -moz-in in -o-predpona za Firefox in Opera, vendar Chrome sprejema različico brez predpone.


Polyfill


Privzeta vrednost za osem presledkov je strašno velika. Če morate podpirati nepodprti brskalnik, lahko uporabite to polnilo (JavaScript v tem pisalu):


Oglejte si
polnilo velikosti zavihka Pen s CSS-Tricks (@ css-tricks)
na CodePen.


Podpora za brskalnik


Ti podatki o podpori brskalnika so od Caniuse, ki vsebuje več podrobnosti. Številka pomeni, da brskalnik podpira to funkcijo v tej različici ali novejši.


Namizje


 

 

 Chrome Firefox IE Rob Safari 


 

 

 

 42 53 * Ne 79 13.1 


 

 



Mobilni / tablični računalnik


 

 

 Android Chrome Android Firefox Android iOS Safari 


 

 

 

 88 85 * 81 13.4-13.7 


 

 



Ta lastnost se zelo graciozno razgradi. Vsak brskalnik podpira znake zavihkov. Pomanjkanje podpore za to lastnost ne povzroči ničesar, brskalnik namesto tega prikaže osemmestne široke zavihke.