首先,div部分
1 <body> 2 <div>多行的显示该如何解决呢,后面经过一番google后,我找到了chrome的一个API可以解决上面提到的需求-webkit-line-clamp</div> 3 </body>
然后,css部分
1.单行
1 div { 2 150px; 3 overflow: hidden; 4 text-overflow: ellipsis; 5 display: -webkit-box; 6 -webkit-line-clamp: 2; 7 -webkit-box-orient: vertical; 8 background-color: lightcoral; 9 }
2.多行
主要是用到了-webkit-line-clamp。由于是-webkit,很幸运的移动端的页面可以做兼容。
pc端的话,Firefox、IE、edge不可用,chrome、safari、opera可用。