CODEWITHSUNDEEP
ellipsiscss
arkascha
arkascha

Reputation: 42915

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

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

Upvotes: 16

Views: 34618

Answers (3)

Mario Vlad
Mario Vlad

Reputation: 671

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

Upvotes: 15

millimoose
millimoose

Reputation: 39950

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.

Upvotes: 31

Ilmari Karonen
Ilmari Karonen

Reputation: 50328

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

Upvotes: 4

Related Questions