CSS换行文本溢出显示省略号，多行
Posted 我是一杯果汁
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS换行文本溢出显示省略号，多行相关的知识，希望对你有一定的参考价值。
首先，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可用。
以上是关于CSS换行文本溢出显示省略号，多行的主要内容，如果未能解决你的问题，请参考以下文章