Fanestørrelse - CSS-tricks

Anonim

Den tab-sizeejendom i CSS bruges til at justere mængden af rum, display til fanen karakter.

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

Spil med disse skyder for at se, hvordan forskellige værdier påvirker, hvordan faner gengives (når du rent faktisk kan se faner):

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

Fanetegnet (unicode U + 0009) konverteres typisk til mellemrum (unicode U + 0020) ved hjælp af reglerne for hvid pladsbehandling og kollapses derefter, så der kun vises et mellemrum i en række i browseren. Derfor er tab-sizeejendommen kun nyttig, når reglerne for behandling af det hvide rum ikke gælder, nemlig inde i en

tag, og når white-spaceegenskaben for et element er indstillet til pre-wrap.

Standardværdien for tab-sizeejendommen er 8 mellemrumstegn, og den kan acceptere enhver positiv heltalværdi.


Han er nogle eksempler på de forskellige måder, der tab-sizekan bruges på:


Se Pen
rNBLYjg af Chris Coyier (@chriscoyier)
på CodePen.





Som du kan se i eksemplerne ovenfor, tab-sizejusterer ejendommen mængden af ​​plads, der er tildelt tabulatortegnet. I det andet eksempel er


tag skal have sin white-spaceegenskab justeret til pre-wrap, for at fanebladet ikke kan konverteres til almindelige mellemrum og skjules.


Du vil også bemærke i CSS, at -moz-og og -o-præfikser er nødvendige for Firefox og Opera, men Chrome accepterer den ikke-præfixede version.


Polyfyld


Standard med otte pladser er frygtelig stor. Hvis du har brug for at understøtte en ikke-understøttet browser, kan du bruge denne polyfyldning (JavaScript i denne pen):


Se polyfill
-størrelse med pen- faneblad af CSS-Tricks (@ css-tricks)
på CodePen.


Browsersupport


Denne browsersupportdata er fra Caniuse, som har flere detaljer. Et tal angiver, at browseren understøtter funktionen i den version og opefter.


Desktop


 

 

 Chrome Firefox IE Edge Safari 


 

 

 

 42 53 * Ingen 79 13.1 


 

 



Mobil / tablet


 

 

 Android Chrome Android Firefox Android iOS Safari 


 

 

 

 88 85 * 81 13.4-13.7 


 

 



Denne ejendom nedbrydes meget yndefuldt. Hver browser understøtter fanetegn. Manglende support til denne ejendom bryder ikke noget, browseren viser kun otte tegn brede faner i stedet.