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

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

我使用了一张 table ，但是它不起作用，我无法限制单元格的高度。

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

最佳答案

我用演示创建了一个 fiddle :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;
}

关于css - 如何使用HTML-CSS表获取垂直文本省略号？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15774102/