html - Specifying Tab-Width?

Question

Is it possible to define the tab-width when whitespace is displayed (say within a <pre> tag or something)? I can't find anything to do this with CSS, but this seems like it would be a pretty common thing to want to do.

In my case, the tab width is so wide that it causes some of my code snippets on a page to be too wide. If I could somehow shorten the tab-width to make it fit without scrollbars it would make things much easier. (I suppose I could just replace the tabs with spaces, but ideally I would love to find a way to do this without doing that)

Answer 1

Use the tab-size property. You’ll need vendor prefixes currently. Example:

pre
{
    -moz-tab-size: 4;
    -o-tab-size:   4;
    tab-size:      4;
}

See also the article on developer.mozilla.org: tab-size.

.tabstop
{
    -moz-tab-size: 4;
    -o-tab-size:   4;
    tab-size:      4;
}

Unstyled tabs (browser default)
<pre>
one tab
two tabs
three tabs
</pre>

Styled tabs (4em)
<pre class="tabstop">
one tab
two tabs
three tabs
</pre>