三个或更多行文本的纯CSS省略号

Question

有没有CSS的方式(没有JavaScript/jQuery)只显示前两行,如果有三行或更多行,隐藏额外的行并显示省略号？

例如,我怎么能把这个小提琴:

http://jsfiddle.net/0yyr3e63/

......让它看起来像这样？

Lorem Ipsum Dolor
Sit Amet Consectetur

Ut Enim Ad Minim
Veniam Quis Nostrud...

Duis Aute Irure
Dolor In...

提前致谢.

Answer 1

您可以将 text-overflow:ellipsis属性与 一起使用height。

像这样

.truncate 
{
width: 250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
height:100px;
}

通过使用 text-overflow，您可以在不使用 javascript 的情况下显示输出。

来源

来源链接

了解有关截断的更多信息。阅读此链接

新更新

对于多行省略号，您可以使用此方法。

css
.classname:after{
content: "\02026";
} 

多行省略号

我认为可能有用的链接很少

1.Codepen示例

2.CSS技巧