How to obtain a vertical text ellipsis with HTML-CSS tables?

Question

I want to display a text in a small space where only two lines can fit. When the text is too long I'm looking for a way to obtain an ellipsis at the end of the second line.

I used a table but it doesn't work, I can't limit the cell height.

<td style="overflow-x: hidden;overflow-y:hidden;text-overflow: ellipsis;max-height:50px">text</td>

Mev

Have you tried a div inside the td? – Gaskin

Seems to be impossible with pure CSS. See this thread for some possible solutions: #6223116 – Coo

Answer 1

I've created a fiddle with a demo: http://jsfiddle.net/sandro_paganotti/N35Hw/. Unfortunately you have to know in advance if the text is going to overflow in order to display the before selector.

HTML

<p><span>
    lalla al lalla lalla la lallalla 
    llal alla alla alllla la la al allla
    lalall alla alla alla alla alla
    lla alla lalla lalla alla alla allalla lla
    llala lall lalla lal
</span></p>

CSS

p{
    width: 200px;
    border: 5px solid black;
    position: relative;
}
p:after{
    content: '...';
    display: block;
    position: absolute;
    bottom: 6px;
    right: 10px;
    background: #FFF;
}

span{
    display: block;
    margin: 10px;
    height: 50px;
    overflow: hidden;
}

Midshipmite

The height of the span should be set in em, to fit whatever font size you have. – Franchescafranchise

You can refine this solution with jQuery calculating if a element is going to overflow, see #26630006 – Eyecatching

Answer 2

Last time I encountred the same problem, I went for a jQuery option. It's packaged in a plugin. I don't remember I found anything satisfying in CSS only. But you've got here examples of what you can achieve, I don't believe it can get much further.

EDIT: have you seen this example? It basically fakes the dots with a <span>...</span>. Dirty unadvised hacking but it can suit your needs.

Franchescafranchise