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 |
Browser-Kompatibilität
Loading…