Advertisement

多行文本溢出显示省略号(移动端)

阅读量:

【一行内容超出时自动隐藏溢出部分

div{

overflow:hidden;

text-overflow:ellipsis;

white-space:nowrap;

}

当内容超过两行时进行隐藏处理

div{

overflow:hidden; //前两个属性保持不变

text-overflow:ellipsis;

white-space:normal !important;

display:-webkit-box;/将对象作为弹性伸缩盒子模型显示/l

-webkit-line-clamp:2; 限制盒子的显示行数

-webkit-box-orient:vertical; 设置排列方式

}

然而,这种实现方式仅适用于Chrome浏览器及移动端设备。

限制字数为2行限制字数限制字数限制字数限制字数限制字数

看来最终只能通过JavaScript代码来实现字数的控制。

$("ellipsis-2").each(function(){

var len=$(this).text().length;

var maxlen=25;

if(len>maxlen){

(this)}.text((this).text().subtring(0,maxlen))

(this).html((

全部评论 (0)

还没有任何评论哟~