多行文本溢出显示省略号... | ibcLee's home

单行文本溢出显示省略号的方法很容易实现

.text{  overflow: hidden;  text-overflow:ellipsis;  white-space: nowrap;}
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}

但是如果需要实现多行文本的溢出用这种方式是不能实现的,而最近的工作中也有很多地方需要实现这种多行文本的溢出,看了很多文章,下面总结一下多行文本溢出的实现方法.

-webkit-line-clamp

webkit内核的浏览器支持一种叫-webkit-line-clamp的属性,但这个属性并不是标准的一部分.

.text{
  display: -webkit-box; //必须结合的属性,将对象作为弹性的伸缩盒子模型显示
  overflow : hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2; //用来限制一个块元素显示的文本的行数
  -webkit-box-orient: vertical; //必须结合的属性,设置或检索伸缩和对象的子元素的排列方式
}

-o-ellipsis-lastline

从Opera10.60开始,text-overflow新增加一个叫-oo-ellipsis-lastline的值,意思是在文本的最后一行加上省略号,但同样不在标准内.

.text{  overflow:hidden;  white-space: normal;  height: 3em;  text-overflow: -o-ellipsis-lastline;}
  overflow:hidden;
  white-space: normal;
  height: 3em;
  text-overflow: -o-ellipsis-lastline;
}

jQuery

通过js从后向前逐个删除末尾的字符,直至元素的高度小于父元素的高度,并在末尾加上…

$(".figcaption").each(function(i){
    var divH = $(this).height();
    var $p = $("p", $(this)).eq(0);
    while ($p.outerHeight() > divH) {
        $p.text($p.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..."));
    };
});

jQuery插件(dotdotdot.js)

不详细解释了,附上文档链接:
dotdotdot.js文档

最后还有一种方法:让产品改需求,让设计改设计…