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

Question

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

我使用了表格但它不起作用，我无法限制单元格高度。

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

Answer 1

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