526互联

css 实现单行、多行溢出 省略号显示

发布时间 2023-04-11 11:24:44作者: ducky_L

1、单行溢出显示省略号：

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

2、多行溢出省略号：

　　①、（缺点：此方法因为使用了webkit属性，故只能chrome等浏览器有效）

{
 -webkit-line-clamp: 2;
  /* autoprefixer: off */
 -webkit-box-orient: vertical;  //防止浏览器忽略该属性
/* autoprefixer: on */
display: -webkit-box;
display: -moz-box;
overflow: hidden;
text-overflow: ellipsis; 
}




　　②、使用伪元素显示省略号：（缺点：无论是否溢出都有省略号）




p{
    position: relative; 
    line-height: 16px; 
    max-height: 32px;
    overflow: hidden;
}
p::after{
     content: "..."; 
     position: absolute; 
     bottom: 0; 
     right: 0; 
     padding-left: 40px;
     background: -webkit-linear-gradient(left, transparent, #fff 55%);
     background: -o-linear-gradient(right, transparent, #fff 55%);
     background: -moz-linear-gradient(right, transparent, #fff 55%);
     background: linear-gradient(to right, transparent, #fff 55%);     
}





 　　③、使用js，兼容浏览器( 判断是否超出高度，是则用“...”替换溢出的文字)




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