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.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.

Please take two minutes to fill out our short survey.

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">&#9;123</pre>
</section>

#example-element {
  border: 1px solid;
}

Syntax

css

/* <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 für Tabs verwendet wird. Muss nicht negativ sein. Die Vorschubbreite bezeichnet den Abstand, den ein Cursor oder 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

Erweiterung nach Zeichenanzahl

css

pre {
  tab-size: 4; /* Set tab size to 4 characters wide */
}

Tabs reduzieren

css

pre {
  tab-size: 0; /* Remove indentation */
}

Standard-Tabgröße vs. benutzerdefinierte Größen

Dieses Beispiel vergleicht eine Standard-Tabgröße mit einer benutzerdefinierten Tabgröße. Beachten Sie, dass white-space auf pre gesetzt ist, um zu verhindern, dass die Tabs zusammenfallen.

HTML

html

<p>no tab</p>
<p>&#0009;default tab size of 8 characters wide</p>
<p class="custom-number">&#0009;custom tab size of 3 characters wide</p>
<p>&nbsp;&nbsp;&nbsp;3 spaces, equivalent to the custom tab size</p>
<p class="custom-length">&#0009;custom tab size of 50px wide</p>

CSS

body {
  border: 1px solid red;
  margin: 1rem;
}

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

Siehe auch

white-space