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">&#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