tab-size
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since August 2021.
Die tab-size CSS-Eigenschaft wird verwendet, um die Breite von Tabulatorzeichen (U+0009) anzupassen.
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 Voranschrittsbreite des Leerzeichens (U+0020), das als Breite für Tabs verwendet wird. Muss nicht negativ sein. Die Voranschrittsbreite bezeichnet die Strecke, die ein Cursor oder ein Druckkopf zurücklegt, bevor der nächste Buchstabe gedruckt wird.
<length>-
Die Breite der Tabs. Muss 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
Erweitern durch Zeichenanzahl
pre { tab-size: 4; /* Set tab size to 4 characters wide */ } Tabs Zusammenfassen
pre { tab-size: 0; /* Remove indentation */ } Standard-Tab-Größe vs. Benutzerdefinierte Größen
Dieses Beispiel vergleicht eine Standard-Tab-Größe mit einer benutzerdefinierten Tab-Größe. Beachten Sie, dass white-space auf pre gesetzt ist, um zu verhindern, dass die Tabs zusammengefasst werden.
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
| Specification |
|---|
| CSS Text Module Level 3 # tab-size-property |