调用方法:
每次只为一个元素服务,也就是传入函数的选择器(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>