首先，div部分
1 <body> 2 <div>多行的显示该如何解决呢，后面经过一番google后，我找到了chrome的一个API可以解决上面提到的需求-webkit-line-clamp</div> 3 </body>
然后，css部分
1.单行
1 div { 2 width: 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可用。
原文：http://www.cnblogs.com/yiguozhi/p/5524548.html