首页 专题 H5案例 前端导航 UI框架

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

作者:TG 日期: 2016-07-29 阅读: 1111
我们先来看效果图,如下:

代码实现:

//单行

.single-line{

   width:200px;

   overflow:hidden;

   white-space:nowrap;  

   text-overflow:ellipsis;

}

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


//多行

.multiple-line{   

  width:200px;   

  display:-webkit-box;   

  -webkit-box-orient:vertical;   

  -webkit-line-clamp:2;   

  overflow:hidden;   

}

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



关注”全栈技术杂货铺“

全栈技术杂货铺