CSS Fixed Width in a Span

#mybox {  width: 400px;}
.myli {  background-color: yellow !important;}
.mytext {  width: 250px;}span {  display: inline-block;}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><div id="mybox">

<ol><li class="myli list-group-item clear-fix"><span class="mytext">Some text</span><span class="pull-right"><button>Button</button></span></li><li class="myli list-group-item clear-fix"><span class="mytext">Some text</span><span class="pull-right"><button>Button</button></span></li><li class="myli list-group-item clear-fix"><span class="mytext">Some very long text which interferes with the button on the following row oiwiowh wdoihsoih osdih ohsdih soidhoishisdhoidh soidh odih</span><span class="pull-right"><button>Button</button></span></li><li class="myli list-group-item clear-fix"><span class="mytext">Some text</span><span class="pull-right"><button>Button</button></span></li></ol>
</div>

Span tag text with fixed width

According to your question, I have inferred that, you want to make the span tag wide around 4 characters. Well, CSS does provide the solution for this problem.

You can use the ch unit to set the 4 character width.

<span>9</span>

Style:

span {
  display: inline-block;
  width: 4ch;
  word-break: break-word;
}

In CSS 1ch is equivalent to the width of "0" of the currently used font, in this case the span tag will have width of around four 0s. You also need word-break: break-word property, suppose if you have "99999" (five 9's without any space),if you did not include it, the 5th character will span beside the 4th character instead of the new line, causing the overflow of the characters in the span tag.

Also, if you want to enable it for the span tag make sure you are including the display: inline-block or display: block style for the span.

Does height and width not apply to span?

Span is an inline element. It has no width or height.

You could turn it into a block-level element, then it will accept your dimension directives.

span.product__specfield_8_arrow
{
    display: inline-block; /* or block */
}

fixing span width

<span>s are inline elements, like <a> and <img>, therefore they cannot accept rules like width:, height: and others.

To allow the <span> to accept these rules, add display: block; to the Span's CSS.

This will allow it to accept the width rule and fill up your TD.

That or just change your <span> to a <div>.

If that doesn't work, post your code and we'll take a closer look :)

Span fix width in div

I don't know if i got it right but what i understand is that there should at least be an underlined block even if it contains no text. What you need to do is making div out of span because you can't apply a width to span tags. Then you should give the div a height and min-width in css. With the min-width you make sure that even if the div is empty it has at least this minimum width.

Look at my fiddle here:
http://jsfiddle.net/e8t64vtk/2/

CSS : span in left with fixed width, span in right with fixed width, the center table fills up rest of the space

You can use float, also using span as a container is not a good idea. Instead use div. Also put your table inside a div:

.container {  overflow: hidden;}.left {  float: left;  width: 100px;  background: yellow;}.right {  float: right;  width: 100px;  background: yellow;}.main {  background: orange;  margin: 0 100px;}

<div class="container">  <div class="left">Left</div>  <div class="right">Right</div>  <div class="main">    Hello World  </div></div>