CSS: set the tab size in textarea and pre tags

2020-02-16

The tab-size CSS property can be used to set the tab size in preformatted text in HTML; for example, in pre and textarea elements. At the time of writing, vendor-prefixes are needed for some browsers and a single integer representing the width of the tab measured in character widths.

Here is how it looks:

Code:

<style>
.tab2 { -o-tab-size: 2; -moz-tab-size:2; tab-size: 2; }
.tab4 { -o-tab-size: 4; -moz-tab-size:4; tab-size: 4; }
.tab8 { -o-tab-size: 8; -moz-tab-size:8; tab-size: 8; }
</style>
<pre class="tab2">	Tab width 2</pre>
<pre class="tab4">	Tab width 4</pre>
<pre class="tab8">	Tab width 8</pre>

Result:

	Tab width 2

	Tab width 4

	Tab width 8