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 Vorwärtsschrittweite des Leerzeichens (U+0020), das als Breite der Tabs verwendet wird. Muss nicht negativ sein. Die Vorwärtsschrittweite bedeutet die Distanz, die ein Cursor oder ein Druckkopf bewegt werden muss, bevor das nächste Zeichen 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 durch Zeichenanzahl

css

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

Tabs zusammenführen

css

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

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

Dieses Beispiel vergleicht eine Standard-Tabulatorgröße mit einer benutzerdefinierten Tabulatorgröße. Beachten Sie, dass white-space auf pre gesetzt ist, um zu verhindern, dass Tabs zusammengeführt werden.

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