如何使用HTML-CSS表获取垂直文本省略号？

Question

我想在一个只有两行可以容纳的小空间中显示文本。当文本太长时，我正在寻找一种在第二行末尾获得省略号的方法。

我用了一张桌子，但是不起作用，我不能限制细胞高度。

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

Answer 1

我用一个演示创建了一个小提琴：http://jsfiddle.net/sandro_paganotti/N35Hw/。不幸的是，你必须事先知道文本是否会溢出才能显示before选择器。

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

Answer 2

上次我解决了同样的问题，我去了一个jQuery选项。它包装在plugin。我不记得我发现只有CSS令人满意。但是你有here可以实现的例子，我不相信它可以进一步发展。

编辑：你见过this example？它基本上用<span>...</span>伪造点。肮脏的未经修改的黑客但它可以满足您的需求。