text-overflow as ellipsis not working

Question

I have a table which is being dynamically populated from MySQL. The table has been applied with the following CSS

.table th,
.table td {
  padding: 8px;
  line-height: 18px;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid #dddddd;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

I also have a defined width:

<td style="width: 100px">Some Stationers &amp; Printers , Yamunanagar</td>

I want that this to look like Some Stationers & Pr... Some Stationers & Pr... I don't know what i am doing wrong here, any suggestions will be appreciated!

Browsers that this has been test on are Safari and Chrome, so just webkit!

Answer 1

text-overflow only applies to block elements (aka elements with display: block ).

You will have to wrap the content in your <td> s to have the property take effect, like this:

<td>
  <div style="text-overflow: ellipsis; overflow: hidden">
    Some Stationers &amp; Printers , Yamunanagar
  </div>
</td>

(You could do this automatically with JS, if you can't touch the markup.)

Answer 2

Demo

.table th,  
.table td {
  background:#eee;
  padding: 8px;
  line-height: 18px;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid #dddddd;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  float:left;        // added
}

Answer 3

Hi u just add display:block in you td css

css

table th,
table td span{
  padding: 8px;
  line-height: 18px;
  text-align: left;
  vertical-align: top;
  border: 1px solid green;
  white-space: nowrap;
  float:left;
  text-overflow: ellipsis;
    width:100px;
    overflow:hidden;
}

HTML

<table><tr>
    <td><span>Some Stationers &amp; Printers , Yamunanagar</span></td></tr></table>
​

and live demo here

http://jsfiddle.net/rohitazad/PAJzK/24/