如何使用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>偽造點。 骯臟的未經修改的黑客但它可以滿足您的需求。