Take the 2-minute tour ×

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)

share|improve this question
I recently created this jQuery plugin to solve this problem on one of my sites. github.com/davestewart/jquery-plugins/tree/master/tabSize It uses the CSS3 property tab-size if available, but if not, it correctly converts tabs to spaces, including those tabs which do not take up a whole tab width, aka columns. –  Dave Stewart Jun 26 '12 at 12:22
add comment

3 Answers

up vote 5 down vote accepted

I believe this blog post should help you out:

Here's a solution, it's not neat since it has to be done for every instance of a tab, but it makes the tabs take up less space and preserves the formatting for copying out of the browser (obviously replace "A SINGLE TAB HERE" with a real tab, this blog software automatically removes tabs from entries it seems):

<span style="display:none">A SINGLE TAB HERE</span><span style="margin-left:YOUR NEW TAB WIDTH"></span>

Basically, replace every instance of a tab in your code with that code snippet (after choosing a suitable width, you could do it in a stylesheet pretty easily). The code artificially inserts the margin whilst keeping the original tab in the code ready for copy/pasting.

Incidentally, it looks like tab stops made it into the CSS specification.

There's also another Stack Overflow question on this subject.

share|improve this answer
"tab stops made it into the CSS specification" No, they didn't. At least, they didn't make it to levels 1 or 2 at the time of this answer. There is a proposed tab-size property in the CSS3 drafts though. –  BoltClock Jul 19 '11 at 22:19
"I believe this blog post should help you out." Then quote the relevant part of the post. External links can be modified, deleted, moved, etc. Stack Overflow is meant to be a resource not just when you ask/answer a question, but in the future when others find it and need to reference the information. Details: meta.stackexchange.com/questions/8231/… The good news is that it seems (on brief glance) that, more than two years later, that blog is still alive and the post still there. (I don't know if the content has changed.) –  T.J. Crowder Jan 8 '12 at 23:49
@T.J.Crowder You're right to downvote my post because I didn't include a summarization, and I'll work on including it. But while you downvote today, note that the answer was written almost 3 years ago, when the policy wasn't as clearcut as it is now. Perhaps you should have left the comment, given me a chance to fix the issue, and then downvote if I didn't? –  George Stocker Jan 9 '12 at 0:05
@GeorgeStocker: Completely agreed. (And yes, it was me who downvoted it recently, although note that you had no way of knowing that for sure until I told you -- your post was recently linked and will have recently come to the attention of a lot of people; it could easily have been commented upon and, separately, downvoted.) Will at least reverse that when I can (I can't until the answer changes). –  T.J. Crowder Jan 9 '12 at 0:17
add comment

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

    -moz-tab-size: 4;
    -o-tab-size:   4;
    tab-size:      4;

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

Here is a simple test page for browser support.

share|improve this answer
By the way, I was that random upvoter last night. I finally got around to documenting some code and was dreading the idea of switching to spaces for the huge tab widths in the <pre> blocks - this did the trick in Firefox, but doesn't seem to work (yet) on webkit surprisingly - actually it looks like only opera and firefox are supporting it... back to the spaces I guess. –  Wesley Murch May 12 '12 at 5:14
New version of Chrome supports "tab-size" now :) –  jhasse Sep 7 '12 at 9:17
add comment

As George Stocker pointed out tab stops should be coming along in a future CSS (FF4 should have it), but in the mean time...

The problem with the linked blog post is that the tabs aren't copied when copying/pasting from the browser. As an alternative try the following:

int main()
<span class=tabspan>\t</span>return 0;

Where "\t" in the above is the actual tab character. Now it should copy and paste properly. Not as nice as slapping a css property on the <pre> tag, but such is life.

(P.S. answered this old post as its high on google for 'css tab width' and I came up with this solution shortly after coming here.)

share|improve this answer
You were spot on, -moz-tab-size was implemented in Gecko 2, the engine used by Firefox 4. developer.mozilla.org/en/CSS/-moz-tab-size –  BoltClock Jul 22 '11 at 17:03
add comment

Your Answer


