tab-size CSS property
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit August 2021 browserübergreifend verfügbar.
Mit der CSS-Eigenschaft tab-size können Sie die Breite von Tabulatorzeichen (U+0009) anpassen.
Probieren Sie es aus
tab-size: 10px;
tab-size: 16px;
tab-size: 24px;
tab-size: 4;
<section id="default-example">
<pre id="example-element">	123</pre>
</section>
#example-element {
border: 1px solid;
}
Syntax
/* <number> values */
tab-size: 4;
tab-size: 0;
/* <length> values */
tab-size: 10px;
tab-size: 2em;
/* Global values */
tab-size: inherit;
tab-size: initial;
tab-size: revert;
tab-size: revert-layer;
tab-size: unset;
Werte
<number>-
Ein Vielfaches der Vorschubbreite des Leerzeichens (U+0020), das als Breite von Tabulatorzeichen verwendet wird. Der Wert darf nicht negativ sein. Die Vorschubbreite ist die Entfernung, um die sich ein Cursor oder Druckkopf vor der Ausgabe des nächsten Zeichens bewegt.
<length>-
Die Breite von Tabulatorzeichen. Der Wert darf nicht negativ sein.
Formale Definition
| Anfangswert | 8 |
|---|---|
| Anwendbar auf | Blockcontainer |
| Vererbt | Ja |
| Berechneter Wert | die angegebene Ganzzahl oder eine absolute Länge |
| Animationstyp | Längenangabe |
Formale Syntax
tab-size =
<number [0,∞]> |
<length [0,∞]>
Beispiele
Erweiterung nach Zeichenanzahl
pre {
tab-size: 4; /* Set tab size to 4 characters wide */
}
Tabulatorzeichen zusammenfallen lassen
pre {
tab-size: 0; /* Remove indentation */
}
Standardmäßige und benutzerdefinierte Tabulatorbreiten
Dieses Beispiel vergleicht die standardmäßige Tabulatorbreite mit einer benutzerdefinierten Tabulatorbreite. Beachten Sie, dass white-space auf pre gesetzt ist, damit die Tabulatorzeichen nicht zusammenfallen.
HTML
<p>no tab</p>
<p>	default tab size of 8 characters wide</p>
<p class="custom-number">	custom tab size of 3 characters wide</p>
<p> 3 spaces, equivalent to the custom tab size</p>
<p class="custom-length">	custom tab size of 50px wide</p>
CSS
p {
white-space: pre;
}
.custom-number {
tab-size: 3;
}
.custom-length {
tab-size: 50px;
}
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| CSS Text Module Level 3 # tab-size-property |