欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

CSS实现单行、多行文本溢出显示省略号的方法

程序员文章站 2022-04-11 14:20:08
...
代码实现:

//单行

.single-line{

width:200px;

overflow:hidden;

white-space:nowrap;

text-overflow:ellipsis;

}

<p class="single-line"></p>

//多行

.multiple-line{

width:200px;

display:-webkit-box;

-webkit-box-orient:vertical;

-webkit-line-clamp:2;

overflow:hidden;

}

注意:由于使用的是WebKit的CSS扩展属性,所以该方法只适用于WebKit浏览器及移动端;

以上就是CSS实现单行、多行文本溢出显示省略号的方法的详细内容,更多请关注其它相关文章!