天天看點

CSS實作div内文字顯示兩行,超出兩行部分省略号顯示CSS實作div内文字顯示兩行,超出兩行部分省略号顯示

CSS實作div内文字顯示兩行,超出兩行部分省略号顯示

在搭建前台文章清單中,需要實作div内文字顯示兩行,超出的則省略号顯示。

找了很多,都貌似隻能一行顯示。最後在百度知道找到答案。

答案轉自百度知道,題主的自答。

用的是-webkit-私有屬性。
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

另有回答是通過jquery來實作的
下載下傳Jquery插件:jQuery ellipsis plugin
調用方法:
$(document).ready(function() {
  $('.ellipsis').ellipsis();
}      

原文https://www.cnblogs.com/gaoxiaohe555/p/9699626.html