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

概述有没有CSS的方式(没有JavaScript / jQuery)只显示前两行,如果有三行或更多行,隐藏额外的行并显示省略号？例如,我怎么能把这个小提琴：http://jsfiddle.net/0yyr3e63/......让它看起来像这样？Lorem Ipsum Dolor Sit Amet Consectetur Ut Enim Ad Minim Ven

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

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

http://jsfiddle.net/0yyr3e63/

……让它看起来像这样？

Lorem Ipsum DolorSit Amet ConsecteturUt Enim Ad MinimVeniam Quis Nostrud...Duis Aute IrureDolor In...

提前致谢.最佳答案您可以使用带有高度的text-overflow：ellipsis属性.

像这样

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

通过使用文本溢出,您可以在不使用JavaScript的情况下显示输出.

来源

Source Link

To Learn more about truncating. Read this link

新的更新

对于多行省略号,您可以使用此方法.

CSS.classname:after{content: "026";} 

Multiline-Ellipsis

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

1.Codepen example

2.Css Tricks 总结

以上是内存溢出为你收集整理的html – 三行或更多行文本的纯CSS省略号全部内容，希望文章能够帮你解决html – 三行或更多行文本的纯CSS省略号所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。