text-overflow ellipsis in fluid width table cells

Question

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?

@user3501411 yes but does the text start using text-overflow:ellipsis for you? — CaribouCode, Jul 03 '14 at 14:31
Ah sorry didn't understand the question... If you wish to have three dotts in the end just add max-width. — Krsto Jevtic, Jul 03 '14 at 14:35
@user3501411 yes I need fluid width, so can't use specific widths or max-widths — CaribouCode, Jul 03 '14 at 14:38
So what _should_ your “fluid width” depend on then …? If you don’t apply _any_ restrictions, then the width of the cell is determined by the length of the text – and then _of course_ it is not cut off with an ellipsis at the end. You need to be more specific as to what you _actually_ want here, before that this question makes little sense. — CBroe, Jul 03 '14 at 14:42
@CBroe I explained clearly and if you read the code I posted you should also understand. The table is set to 100% width. In the fiddle you'll see that is also 100% width of the body and html. In live production that would be the width of the device. At the moment the text in the cell pushes the boundary of the cell past 100% width. — CaribouCode, Jul 03 '14 at 14:47
Well then simply adding `table { table-layout:fixed; }` should solve your problem … — CBroe, Jul 03 '14 at 14:48
Ah yes it does! That seems like the kind of answer I was looking for — CaribouCode, Jul 03 '14 at 14:53

score 2 · Accepted Answer · edited May 23 '17 at 12:34

2

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)

edited May 23 '17 at 12:34

Community

1
1

answered Jul 03 '14 at 14:35

domokun

3,013
3
29
55

Oh that is disappointing if that's true. Shame it doesn't suck so much and just do what you want it to do! – CaribouCode Jul 03 '14 at 14:38
I'll have to give you the points seeing as @CBroe didn't answer properly, but credit goes to him for that one. – CaribouCode Jul 03 '14 at 14:59
I credited him, but if he puts up an answer, feel free to pull of the selection from my answer and give it to him. In the end, what matters is that the answer is there for the community – domokun Jul 03 '14 at 15:00
Awesome ! I made the modifications to my css snippet and it works pretty good ! http://codepen.io/anon/pen/ZWPpKd – alexserver May 10 '16 at 20:14

score 0 · Answer 2 · edited May 23 '17 at 10:30

0

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

Fluid table illustration

edited May 23 '17 at 10:30

Community

1
1

answered Feb 23 '16 at 13:26

bjornte

749
1
9
31

text-overflow ellipsis in fluid width table cells

2 Answers2