文字溢出用省略号代替

Posted on 2017-04-26 16:19  武奘  阅读(131)  评论(0编辑  收藏  举报

css:

.itm-word{
width: 88%;
height: 2rem;
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;  //只支持webkit浏览器
font-size: 0.75rem;
padding-top: 0.375rem;
color: #3d3d3d;
position:relative;
padding-left: 6%;
padding-right: 6%;
}
.zxx_text_overflow {
line-height: 1rem;
}

html:

<div class="itm-word">
<p class="zxx_text_overflow">
$!{product.prodName}
</p>
</div>

 

js:

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

Copyright © 2024 武奘
Powered by .NET 9.0 on Kubernetes