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

Genotype

Here's a good example of ellipsis working in a table. – Finespun

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;
}

Frenulum

This example works on Chrome and Safari on the Mac, but not Firefox 45.0.1. Does anyone know how to make this work on Firefox? I thought it should be supported, per caniuse.com/#search=text-overflow – Mortar

The following fiddle shows the exact CSS I'm using that runs on Chrome & Safari, but not Firefox on the Mac: jsfiddle.net/dlwhiteman/qKS8p/368 – Mortar

Answer 2

This fiddle works for me: http://jsfiddle.net/wRruP/3/

HTML

<div><span>column one</span></div>
<div>column two</div>
<div><p>column three</p></div>

​### CSS

div {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 40px;
}

It seems like text-overflow has to be set on the block that's actually constraining the width of the text. <span> is an inline element that doesn't really have a width and thus can't really cut off text, and when I nested a <p>, it didn't inherit the property.

Lum

Thanks, this works but Mario Vlads solution below is much more precise. It changes less and points out what really is the problem: the width styling of the span element. Anyway: thanks ! – Genotype

this works. important fact is that you have to use both overflow: hidden AND text-overflow: ellipsis – Cusco

For me it was having both text-overflow: ellipsis and white-space: nowrap; – Ind

Answer 3

Try setting both the text-overflow property and the fixed width on the same block-level element (such as a div), like this:

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

With your original CSS:

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

Garmon

Thanks, this works but Mario Vlads solution below is much more precise. It changes less and points out what really is the problem: the width styling of the span element. Anyway: thanks ! – Genotype