Can't get "text-overflow: ellipsis;" to work

Question

I cannot get "text-overflow: ellipsis;" to work... Maybe someone can give ma some help with that one :-)

Small example: http://jsfiddle.net/qKS8p/2/

http markup:

<table class="" border="1">
    <tr><td colspan=3>…</td></tr>
    <tr class="">
        <td width="90"><span class="prose">column one</span></td>
        <td width="20"><span class="prose">column two</span></td>
        <td width="90"><span class="prose">column three</span></td>
    </tr>
    <tr><td colspan=3>…</td></tr>
</table>

css style rules:

.prose {
  overflow: hidden;
  white-space: nowrap;
  -o-text-overflow: ellipsis;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
}

I would expect "column two" to be chopped because of the td's width of 20px. I also tried different variants with divs, tds etc, but I cannot see any change. Note, that this does not work in any browser I checked. So there is certainly something I miss.

There are millions of pages out there about examples, browser differences and and and. But I cannot get this to work ! According to current information the simple text-overflow attribute is supported in all major browsers now. So I am looking for a pure css solution (not xul, not jquery plugin), since this should work.

Thanks, arkascha

Answer 1

The problem with the code in the example is that the tables automatically enlarge and ignore the set width of 20px if there's more content then 20px. Here's an example that works: http://jsfiddle.net/qKS8p/34/

I added:

span {
  display:block;
  width:inherit;
}