Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Specifying Tab-Width?

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)

like image 729
Wilco Avatar asked Mar 20 '09 17:03

Wilco


People also ask

What is tab width?

Definition and Usage. The tab-size property specifies the width of a tab character. In HTML, the tab character is usually displayed as a single space-character, except for some elements, like <textarea> and <pre>, and the result of the tab-size property will only be visible for those elements.

What is the default size set in tab key *?

The default is four spaces. Sets the size in spaces of an automatic indentation. The default is four spaces. Tab characters, space characters, or both will be inserted to fill the specified size.

How do you make a tab space in CSS?

The tab character can be inserted by holding the Alt and pressing 0 and 9 together.


1 Answers

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>
like image 112
fuxia Avatar answered Oct 13 '22 20:10

fuxia