js控制當字數超出規定行數時顯示點點點
阿新 • • 發佈：2017-07-14
scrip 函數 jquery logs color ips row end function
調用方法：
每次只為一個元素服務，也就是傳入函數的選擇器（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>
js控制當字數超出規定行數時顯示點點點