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换行文本溢出显示省略号,多行的主要内容,如果未能解决你的问题,请参考以下文章