调用方法：
每次只为一个元素服务，也就是传入函数的选择器（class名）页面中只能有一个，或直接传id；
比如：
//1要限制字数的元素，2要显示多少行，3要限制字数元素的背景颜色
limit(".point1",4,"white");
limit(".point2",4,"white");
limit(".point3",3,"#F1F1F1");
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jQuery.2.4.1.min.js"></script>
<style>
p>span.ddd,
p>span.op1,
p>span.op2,
p>span.op3{
display:block;
position:absolute;
bottom:0;
height:20px;
line-height:13px;
width:7px;
}
p>span.ddd{
width:20px;
right:0;
}
p>span.op1{
right:34px;
opacity:.7;
}
p>span.op2{
right:27px;
opacity:.8;
}
p>span.op3{
right:20px;
opacity:.9;
}
</style>
</head>
<body>
<p id="qfr">
Lorem ipsum dolor sit amet, con sec tetur a dss pi ng elit. Nisi, deserunt, minima, praesentium, rerum voluptas incidunt ipsam animi expedita pariatur numquam ipsum qui sapiente obcaecati eos tenetur atque officiis iure ab.
</p>
<script>
function limit(obj,row,bgColor){
// 设置元素的行高
$(obj).css("line-height","20px");
//获取元素的背景颜色
var objBg = bgColor;
//获取元素的高度
var objH = $(obj).height();
if(objH <= row*20){
return;
}else{
$(obj).css({
"height":row * 20 + "px",
"overflow":"hidden",
"position":"relative"
});
var span1 = $("<span class=‘ddd‘>...</span>");
var span2 = $("<span class=‘op1‘></span>");
var span3 = $("<span class=‘op2‘></span>");
var span4 = $("<span class=‘op3‘></span>");
$(obj).append(span1);
$(obj).append(span2);
$(obj).append(span3);
$(obj).append(span4);
$(obj).find("span").css({
"background":objBg
})
}
}
// 装字的盒子 ，显示多少行,元素的背景颜色
limit("#qfr",2,"white")
</script>
</body>
</html>
时间： 2024-10-27 02:37:50