Tab-Größe - CSS-Tricks

Die tab-sizeEigenschaft in CSS wird verwendet, um die Anzahl der Leerzeichen anzupassen, die für das Tabulatorzeichen angezeigt werden.

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

Spielen Sie mit diesen Bereichsreglern, um zu sehen, wie sich unterschiedliche Werte auf das Rendern von Registerkarten auswirken (wenn Sie tatsächlich Registerkarten sehen können):

Siehe den Stift
rNBLYaP von Chris Coyier (@chriscoyier)
auf CodePen.

Das Tabulatorzeichen (Unicode U + 0009) wird normalerweise durch die Leerraumverarbeitungsregeln in Leerzeichen (Unicode U + 0020) konvertiert und dann reduziert, sodass im Browser nur ein Leerzeichen in einer Zeile angezeigt wird. Daher ist die tab-sizeEigenschaft nur dann nützlich, wenn die Regeln für die Leerraumverarbeitung nicht gelten, nämlich innerhalb von a

Tag und wenn die white-spaceEigenschaft eines Elements auf gesetzt ist pre-wrap.
Der Standardwert für die tab-sizeEigenschaft beträgt 8 Leerzeichen und kann jeden positiven ganzzahligen Wert akzeptieren.
Er sind einige Beispiele für die verschiedenen Möglichkeiten, die tab-sizeverwendet werden können:


Siehe den Stift
rNBLYjg von Chris Coyier (@chriscoyier)
auf CodePen.
Wie Sie in den obigen Beispielen sehen können, tab-sizepasst die Eigenschaft den für das Tabulatorzeichen zugewiesenen Speicherplatz an. Im zweiten Beispiel ist die
Die white-spaceEigenschaft des Tags muss angepasst werden, pre-wrapdamit die Tabulatorzeichen nicht in reguläre Leerzeichen konvertiert und reduziert werden.
Sie werden auch im CSS feststellen, dass die Präfixe -moz-und -o-für Firefox und Opera erforderlich sind, Chrome jedoch die Version ohne Präfix akzeptiert.
Polyfill
Die Standardeinstellung für acht Leerzeichen ist furchtbar groß. Wenn Sie einen nicht unterstützten Browser unterstützen müssen, können Sie diese Polyfüllung (das JavaScript in diesem Stift) verwenden:
Weitere Informationen finden Sie in der
Polyfill-Registerkarte mit Stiftgröße von CSS-Tricks (@ css-Tricks)
auf CodePen.


Browser-Unterstützung
Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.
Desktop
 

 
 
Chrom
 
Feuerfuchs
 
IE
 
Kante
 
Safari
 

 

 

 
 
42
 
53 *
 
Nein
 
79
 
13.1
 

 

 

Handy / Tablet
 

 
 
Android Chrome
 
Android Firefox
 
Android
 
iOS Safari
 

 

 

 
 
88
 
85 *
 
81
 
13.4-13.7
 

 

 

Diese Eigenschaft verschlechtert sich sehr anmutig. Jeder Browser unterstützt Tabulatorzeichen. Mangelnde Unterstützung für diese Eigenschaft führt zu keiner Beeinträchtigung. Der Browser zeigt stattdessen lediglich acht Zeichen breite Registerkarten an.