首先，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可用。
时间： 2024-12-21 17:04:59