tab-size

Die CSS-Eigenschaft tab-size wird verwendet, um die Anzahl der Leerzeichen anzupassen, die für das Tabulatorzeichen angezeigt werden.

pre {
  tab-size: 8; /* default. Pretty big! */

  tab-size: 2;
  tab-size: 13px; /* you can set a width-per-tab also */
}

Spielen Sie mit diesen Bereichsschiebereglern, um zu sehen, wie sich unterschiedliche Werte auf die Darstellung von Tabs auswirken (wenn Sie Tabs tatsächlich sehen können).

Sehen Sie den Pen
rNBLYaP von Chris Coyier (@chriscoyier)
auf CodePen.

Das Tabulatorzeichen (Unicode U+0009) wird normalerweise durch die Regeln für die Leerzeichenverarbeitung in Leerzeichen (Unicode U+0020) umgewandelt und dann so zusammengefasst, dass im Browser nur ein Leerzeichen hintereinander angezeigt wird. Daher ist die Eigenschaft tab-size nur nützlich, wenn die Regeln für die Leerzeichenverarbeitung nicht angewendet werden, nämlich innerhalb eines <pre>-Tags und wenn die white-space-Eigenschaft eines Elements auf pre-wrap gesetzt ist.

Der Standardwert für die Eigenschaft tab-size sind 8 Leerzeichen, und sie kann jeden positiven Ganzzahlwert annehmen.

Hier sind einige Beispiele für die verschiedenen Möglichkeiten, wie tab-size verwendet werden kann

Sehen Sie den Pen
rNBLYjg von Chris Coyier (@chriscoyier)
auf CodePen.

Wie Sie in den obigen Beispielen sehen können, passt die Eigenschaft tab-size die für das Tabulatorzeichen vorgesehene Menge an Leerzeichen an. Im zweiten Beispiel muss die white-space-Eigenschaft des <p>-Tags auf pre-wrap gesetzt werden, damit die Tabulatorzeichen nicht in normale Leerzeichen umgewandelt und zusammengefasst werden.

Sie werden auch im CSS feststellen, dass die Präfixe -moz- und -o- für Firefox und Opera erforderlich sind, während Chrome die nicht-präfixierte Version akzeptiert.

Polyfill

Der Standardwert von acht Leerzeichen ist ziemlich groß. Wenn Sie einen nicht unterstützten Browser unterstützen müssen, könnten Sie diesen Polyfill verwenden (den JavaScript-Code in diesem Pen).

Sehen Sie den Pen
tab-size polyfill von CSS-Tricks (@css-tricks)
auf CodePen.

Weitere Ressourcen

• W3-Spezifikation zur tab-size-Eigenschaft
• MDN
• Ursprüngliche E-Mail aus dem Jahr 2008 an das W3C, in der die Idee von tab-size vorgestellt wurde

Browser-Unterstützung

Diese Eigenschaft verschlechtert sich sehr gut. Jeder Browser unterstützt Tabulatorzeichen. Fehlende Unterstützung für diese Eigenschaft bricht nichts, der Browser zeigt lediglich Tabulatoren mit einer Breite von acht Zeichen an.