css - 如何使用 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 选项。它被打包在一个插件中。我不记得我只在 CSS 中找到任何令人满意的东西。但是你在这里有你可以实现的例子，我不相信它可以走得更远。

编辑：你看过这个例子吗？它基本上用<span>...</span>. 肮脏的未经建议的黑客攻击，但它可以满足您的需求。