首页 > 代码库 > 截取长文本，显示省略号（多行）

截取长文本，显示省略号（多行）

2024-07-19 22:27:44   226人阅读

其实也是前些日子做移动端的页面接到这么个需求，本来以为这没法实现，同事跟

我说-webkit-line-clamp属性可以，就去查了查，果然

Pc端基本不会有这种需求，因为这个方法兼容性太差，浏览器份额不是webkit

占大头（特别是天朝），看前缀就知道只支持webkit内核，他属于webkit内部属性，

和-webkit-text-size-adjust:none（这个Pc端已经不在支持，移动端还可以使用）

类似，但是移动端不一样，现在移动端基本是ios和Android的天下，这个属性还是

很有用的，只需针对WP和Firefox os加上一个max-height 就能防止文本溢出，

但不会出现省略号，如果不需要支持上述两个max-height都不需要。

说这么多还是来个栗子http://jsbin.com/vefeb/1/

 

<p>我要实现多行文本换行我要实现多行文本换行我要实现多行文本换行我要实现多行文本换行我要实现多行文本换行我要实现多行文本换行我要实现多行文本换行我要实现多行文本换行我要实现多行文本换行我要实现多行文本换行我要实现多行文本换行我要实现多行文本换行我要实现多行文本
换行我要实现多行文本换行我要实现多行文本换行我要实现多行文本换行我要实现多行文本换行我要实现多行文本换行我要实现多行文本换行我要实现多行文本换行我要实现多行文本换行我要实现多行文本换行我要实现多行文本换行我要实现多行文本换行我要实现多行文本换行我要实现多行文本换
行我要实现多行文本换行我要实现多行文本换行我要实现多行文本换行</p>

 

p {    overflow : hidden;    text-overflow: ellipsis;    display: -webkit-box;    -webkit-line-clamp: 2;    -webkit-box-orient: vertical;}

 -webkit-line-clamp需配上overflow : hidden  text-overflow: ellipsis和伸缩合

模型当中的两个属性display: -webkit-box  -webkit-box-orient: vertical;

如果你是三行溢出显示省略号，那-webkit-line-clamp: 3 依次类推，四行就是

4、五行就是5。。。

当然你要所有浏览器实现都表现一致，那还得依赖js，利用高度的比较加上正则的

替换来实现，实例链接http://jsbin.com/vefeb/4/

 

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

 

截取长文本，显示省略号（多行）


联系
我们