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

css 溢出 - 只有 1 行文本

纯css实现文本内容单行/多行溢出显示省略号

css / js 控制 文本溢出 省略号显示

怎么用css实现多行文本省略?

div内多行文字, 溢出部分用省略号显示

CSS实现单行多行文本溢出显示省略号(…)