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