Flikstorlek - CSS-tricks

Anonim

Den tab-sizeegendom i CSS används för att justera mängden utrymmen som display för tabbtecken.

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

Spela med dessa intervallreglage för att se hur olika värden påverkar hur flikar återges (när du faktiskt kan se flikar):

Se Pen
rNBLYaP av Chris Coyier (@chriscoyier)
på CodePen.

Fliktecknet (unicode U + 0009) omvandlas vanligtvis till mellanslag (unicode U + 0020) av reglerna för white space-bearbetning och kollapsas sedan så att endast ett mellanslag i rad visas i webbläsaren. Därför är tab-sizeegenskapen endast användbar när reglerna för hantering av vitt utrymme inte gäller, nämligen inuti a

tag och när white-spaceegenskapen för ett element är inställd på pre-wrap.

Standardvärdet för tab-sizeegenskapen är åtta mellanslagstecken och kan acceptera alla positiva heltal.


Han är några exempel på de olika sätten tab-sizeatt använda:


Se penna
rNBLYjg av Chris Coyier (@chriscoyier)
på CodePen.





Som du kan se i exemplen ovan tab-sizejusterar egenskapen mängden utrymme som tilldelats flikens karaktär. I det andra exemplet,


taggen måste ha sin white-spaceegenskap justerad pre-wrapför att fliktegnen inte ska konverteras till vanliga mellanslag och kollapsas.


Du kommer också att märka i CSS att -moz-och och -o-prefix krävs för Firefox och Opera, men Chrome accepterar den icke-prefixade versionen.


Polyfill


Åtta-plats-standard är väldigt stor. Om du behöver stödja en webbläsare som inte stöds kan du använda denna polyfyll (JavaScript i denna penna):


Se
polyfyllning av pennspetsstorlek från CSS-Tricks (@ css-tricks)
på CodePen.


Webbläsarstöd


Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.


Skrivbord


 

 

 Krom Firefox IE Kant Safari 


 

 

 

 42 53 * Nej 79 13.1 


 

 



Mobil / surfplatta


 

 

 Android Chrome Android Firefox Android iOS Safari 


 

 

 

 88 85 * 81 13.4-13.7 


 

 



Den här egenskapen bryts ned mycket graciöst. Varje webbläsare stöder flik tecken. Brist på stöd för den här egenskapen bryter ingenting, webbläsaren visar bara åtta tecken breda flikar istället.