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>

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