0

I have a table that has cells of variable widths and heights set by percentage and I want to have the text truncated like it is with text-overflow: ellipsis; but I want the text to fill my cell with multiple lines until it runs out of space.

.cell {
    background: green;
    white-space:nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

I've prepared an example on jsFiddle: http://jsfiddle.net/QEL2G/22/

In the example, I want the green box to have three lines of text (doesn't HAVE to end in [...]) but not all of the Lorem ipsum if it can't fit into the size allotted.

If you take out the white-space: nowrap; it will stop truncating it after the first line, but then it seems to have no regard for the height of the cell and will not truncate at all.

I've tried many different things, in fact there is a very simple answer if I wanted to define a static size to the cell... but that isn't the case.

Mark Mercer
  • 1
  • 1
  • 2
    There are several existing questions on the topic. Setting `text-overflow: ellipsis` works for single-line content only, so you need to search for completely different approaches. (Truncating data server-side is often the best option.) – Jukka K. Korpela May 16 '13 at 05:09
  • Yes I thought about that but how am I to know how much can fit into the box? – Mark Mercer May 16 '13 at 05:33
  • 1
    There is currently no `text-overflow: ellipsis` that work on multiple lines. But there are plenty of JS solutions for this. The question I have is how high should .cell be? On the one hand you say I don't want to fix a height therefore have it 'auto', but on the other you say I need three line of text which requires a specific height. Can you clarify this? – Timidfriendly May 16 '13 at 06:14

0 Answers0