Tab Width CSS Property

Tab width CSS property

tab-size is currently only implemented by Firefox and Opera using your given vendor prefixes.

For WebKit, there's a bug report requesting that the property be implemented. I believe work has already started on it, as can be seen in the comments on that report.

For IE, well, I can't find anything about an -ms-tab-size or tab-size implementation in IE9 or IE10. I suppose the IE team has been none the wiser.

Specifying Tab-Width?

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.

How to change the size of a tab in a text?

I think you might be looking for tab-size (MDN Link)

The tab-size CSS property is used to customize the width of a tab (U+0009) character.

Wikipedia

In CSS, tabs are preserved in an element as shown above if the attribute white-space set to pre. CSS 3 defines tab-size property, which adjusts the number of spaces for the tab character from the default of 8. The latest version of WebKit supports the tab-size property. The Opera web browser supports the -o-tab-size CSS property, the Firefox web browser supports the -moz-tab-size CSS property with the same meaning.

Note: Support is poor (IE has zero suppport although the property is under consideration for MS Edge).

How to resize tab width automatically in HTML5

You can use flexbox for this behavior. Check this codepen for demo.

HTML:

<div class="parent">
  <ul class="nav">
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
  </ul>
</div>

CSS:

.parent {
  background-color: orange;
}

.parent ul.nav {
  list-style: none;
  padding: 0px;
  margin: auto;
  display: flex;
}

.parent ul.nav li {
  background-color: grey;
  padding: 10px 15px;
  border-right: 1px solid black;
  width: 100%;
  text-align: center;
}

.parent ul.nav li:last-child {
  border: 0px;
}

Hope this would help!

EDIT 1:
Check this other codepen for demo.

body {  padding: 0px;  margin: 0;}
.parent {  background-color: orange;  padding: 20px;}
.parent .tabFrame .itemContainer {  display: inline-block;  margin-bottom: 50px;  padding: 5px;  border: 1px solid;  overflow: hidden;}
.parent .tabFrame .myItem {  background-color: grey;  display: inline-block;  width: 100px; /* can be any fixed width */  padding: 10px;  color: white;  border: 1px solid black;}

<div class="parent">  <div class="tabFrame">    <div>Tab area</div>    <div class="itemContainer">      <div class="myItem">Item 1</div>      <div class="myItem">Item 2</div>      <div class="myItem">Item 3</div>      <div class="myItem">Item 4</div>    </div>      </div>    <div class="tabFrame">    <div>Tab area</div>    <div class="itemContainer">      <div class="myItem">Item 1</div>      <div class="myItem">Item 2</div>      <div class="myItem">Item 3</div>    </div>  </div>    <div class="tabFrame">    <div>Tab area</div>    <div class="itemContainer">      <div class="myItem">Item 1</div>      <div class="myItem">Item 2</div>    </div>  </div>    <div class="tabFrame">    <div>Tab area</div>    <div class="itemContainer">      <div class="myItem">Item 1</div>    </div>  </div></div>

Tab Width CSS not working in Firefox and Internet Explorer

This is how it worked.

  body .ui-tabs .ui-tabs-nav li a 
  {
   padding: .5em 1em;
   width:225px;
   word-wrap: initial;
   height: 25px;
   text-align: center;
   display: inline-block;
  } 

Is it possible to change width of tab symbol in textarea?

You can use the following css for Firefox 4.0+, Chrome 21+ and Opera 10.6+

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

Controlling tab space in a pre using CSS?

From CSS 2.1, § 16.6.1 The 'white-space' processing model:

All tabs (U+0009) are rendered as a horizontal shift that lines up the start edge of the next glyph with the next tab stop. Tab stops occur at points that are multiples of 8 times the width of a space (U+0020) rendered in the block's font from the block's starting content edge.

CSS3 Text says basically the same thing.

From HTML 4.01 § 9.3.4 Preformatted text: The PRE element

The horizontal tab character (decimal 9 in [ISO10646] and [ISO88591] ) is usually interpreted by visual user agents as the smallest non-zero number of spaces necessary to line characters up along tab stops that are every 8 characters. We strongly discourage using horizontal tabs in preformatted text since it is common practice, when editing, to set the tab-spacing to other values, leading to misaligned documents.

If you're concerned with leading tabs, it's a simple matter to replace them with spaces.

/* repeat implemented using Russian Peasant multiplication */
String.prototype.repeat = function (n) {
    if (n<1) return '';
    var accum = '', c=this;
    for (; n; n >>=1) {
        if (1&n) accum += c;
        c += c;
    }
    return accum;
}
String.prototype.untabify = function(tabWidth) {
    tabWidth = tabWidth || 4;
    return this.replace(/^\t+/gm, function(tabs) { return ' '.repeat(tabWidth * tabs.length)} );
}

Change tab spaces length in CSS

div,p,span,textarea {
   -tab-size     : 3;
   -o-tab-size   : 3;
   -moz-tab-size : 3;
}

---

Related Topics