CODEWITHSUNDEEP
htmlcss
CaribouCode
CaribouCode

Reputation: 14398

text-overflow ellipsis in fluid width table cells

I'm trying to achieve a fluid width table where text in the cells isn't allowed to flow onto another line and will use text-overflow:ellipsis when it is too long to fit.

I tried the following test:

HTML:

<table>
    <tr>
        <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec feugiat placerat risus. Maecenas lectus orci, commodo id varius ac, vulputate eget elit. Nunc laoreet feugiat aliquet.</td>
    </tr>
</table>

CSS:

table { width: 100%; }

td { 
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis; }

But as you can see in the fiddle below, the ellipsis doesn't work:

http://jsfiddle.net/p3pXc/

Is there a solution?

Upvotes: 1

Views: 594

Answers (2)

bjornte
bjornte

Reputation: 829

Using JavaScript, this problem is solved here, achieving the effect illustrated below:

Fluid table illustration

Upvotes: 0

domokun
domokun

Reputation: 3003

Unfortunately, there is now way to have the CSS ellipsis on a dynamic width element.

Adding 

display: block;
width: 300px;

for example, will create your ellipsis. But this will not do, in your case.

You will have to fallback on a JavaScript solution, like jquery.ellipsis plugin.
See this question for more information: Insert ellipsis (...) into HTML tag if content too wide

Edit:

Actually, if you just want the column to extend to all the width of the table, without crossing out of the screen (and keeping it only on one line), you should add

table { 
    width: 100%; 
    table-layout: fixed; 
}

See the updated fiddle: http://jsfiddle.net/7v72L/

(thanks to @CBroe for the suggestion)

Upvotes: 2

Related Questions