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

【问题标题】：How to obtain a vertical text ellipsis with HTML-CSS tables?如何使用 HTML-CSS 表格获取垂直文本省略号？
【发布时间】：2013-03-24 08:05:28
【问题描述】：

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

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

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

【问题讨论】：

你试过td里面的div吗？
使用纯 CSS 似乎是不可能的。有关一些可能的解决方案，请参阅此线程：stackoverflow.com/questions/6222616/…

标签： css html html-table ellipsis

【解决方案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;
}

【讨论】：

span 的高度应设置为 em，以适应您拥有的任何字体大小。
您可以使用 jQuery 计算元素是否会溢出来优化此解决方案，请参阅stackoverflow.com/questions/26629506/…

【解决方案2】：

上次我遇到同样的问题时，我选择了 jQuery 选项。它封装在plugin 中。我不记得我只在 CSS 中找到任何令人满意的东西。但是你有 here 的例子说明你可以实现什么，我不相信它可以走得更远。

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

【讨论】：