多行文本溢出显示省略号(移动端)
发布时间
阅读量:
阅读量
【一行内容超出时自动隐藏溢出部分
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)
还没有任何评论哟~
