CSS tab-size Eigenschaft
Wie man die CSS-Eigenschaft tab-size verwendet, um die Breite des Tabulatorzeichens festzulegen. Werte und Beispiele im Überblick.
Die CSS-Eigenschaft tab-size steuert, wie breit ein Tabulatorzeichen (U+0009) dargestellt wird. Standardmäßig rendert ein Browser jeden Tabulator als 8 Leerzeichen, was für Code-Listings oft viel zu breit ist. Mit tab-size lässt sich diese Breite auf eine beliebige Anzahl von Leerzeichenbreiten oder auf eine exakte CSS-Länge festlegen.
Diese Seite erklärt, was die Eigenschaft bewirkt, wo sie tatsächlich wirksam wird, den Unterschied zwischen den Werten <number> und <length>, die Browser-Unterstützung sowie ein ausführbares Beispiel.
Wann ist tab-size relevant?
Ein Tabulator verändert das sichtbare Layout nur dann, wenn der umgebende Leerraum erhalten bleibt. Im normalen HTML reduzieren Browser Tabulatoren, Leerzeichen und Zeilenumbrüche auf ein einzelnes Leerzeichen, sodass tab-size keine Wirkung hat. Die Eigenschaft wird relevant, wenn Leerraum beibehalten wird — das ist in zwei häufigen Situationen der Fall:
- Innerhalb von
<pre>und<textarea>, die Leerraum standardmäßig erhalten. - Bei jedem Element, bei dem
white-spaceaufpre,pre-wrapoderpre-linegesetzt wird.
Deshalb ist tab-size die richtige Eigenschaft, wenn Quellcode, ASCII-Tabellen oder andere Inhalte angezeigt werden, bei denen Spalten bündig ausgerichtet sein müssen. Die Eigenschaft gehört zu den CSS3-Eigenschaften und wird vererbt, sodass die Einstellung auf einem Container auch auf verschachtelten vorformatierten Text angewendet wird.
Negative Werte sind ungültig und die Deklaration wird ignoriert. Der Wert muss eine nicht-negative <number> oder eine nicht-negative <length> sein.
| Anfangswert | 8 |
|---|---|
| Gilt für | Alle Elemente, wirkt sich jedoch nur auf Block-Container und Elemente mit erhaltenem Leerraum aus. |
| Vererbt | Ja. |
| Animierbar | Nein. |
| Version | CSS3 |
| DOM-Syntax | object.style.tabSize = "20"; |
Syntax
tab-size: <number> | <length> | initial | inherit;<number>— die Anzahl der Leerzeichenbreiten, die ein Tabulator einnimmt (z. B.tab-size: 4). Dies ist die gebräuchlichste Form. Sie ist relativ zur Schriftart, sodass der Tabulator proportional bleibt, wenn sich die Schriftgröße ändert.<length>— eine explizite Breite wietab-size: 2emodertab-size: 20px. Nützlich, wenn ein fester, schriftartenunabhängiger Tabstopp benötigt wird.
Ein Tabulatorzeichen fügt nicht immer eine vollständige tab-size-Breite an Abstand hinzu. Wie ein echter Tabstopp springt es den Text zum nächsten Tabstopp-Rand, sodass der Abstand davon abhängt, wie viele Zeichen vor dem Tabulator in dieser Zeile stehen.
Beispiel der tab-size Eigenschaft
CSS tab-size Code-Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.tab1 {
tab-size: 5;
}
.tab2 {
tab-size: 20;
}
</style>
</head>
<body>
<h2>Tab-size property example</h2>
<pre class="tab1">
Lorem ipsum is a...
</pre>
<pre class="tab2">
Lorem ipsum is a...
</pre>
</body>
</html>Ergebnis
Im gezeigten Beispiel beträgt die tab-size des ersten Elements 5 und die des zweiten Elements 20.
Verwendung eines Längenwerts
Anstelle einer Leerzeichenanzahl kann eine feste Breite angegeben werden. Hier springt jeder Tabulator zu einem 2em-Rand, unabhängig von der Leerzeichenbreite der Schriftart:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
pre {
tab-size: 2em;
}
</style>
</head>
<body>
<pre>Name Role
Ann Designer
Bob Developer</pre>
</body>
</html>Da jede Zeile nach dem Namen einen Tabulator verwendet, wird die zweite Spalte am gleichen 2em-Tabstopp ausgerichtet.
Browser-Unterstützung
tab-size wird von allen modernen Browsern unterstützt. Die <number>-Form hat die breiteste Unterstützung; die <length>-Form wird in aktuellen Versionen von Chrome, Edge, Firefox und Safari unterstützt. Ältere Browser benötigen möglicherweise die Präfixe -moz-tab-size und -o-tab-size, die jedoch für aktuelle Browser nicht mehr erforderlich sind.
Werte
| Wert | Beschreibung | Ausprobieren |
|---|---|---|
| number | Legt die Anzahl der Leerzeichen in einem Tabulator fest. Negative Werte sind ungültig. Der Standardwert ist 8. | Ausprobieren » |
| length | Legt die Breite des Tabulators fest. Negative Werte sind ungültig. Dieser Wert wird von modernen Browsern weitgehend unterstützt. | |
| initial | Setzt die Eigenschaft auf ihren Standardwert zurück. | |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |