又是一个阳光明媚的早晨，最近有点闲就也谢谢文章，
今天先上效果图
接下来就是令人期待的源码啦，上
line_change.html
<!DOCTYPE html> <html> <script type="text/javascript" src="jquery-3.1.1.min.js"></script> <script type="text/javascript" src="line_change2.js"></script> <style> table { border-collapse: collapse; border-spacing: 0; } th,td { padding: 0; } </style> <head> <meta charset="UTF-8"> <title></title> </head> <body> <table style="width: 100%;"> <tr class="line_zyq"> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr class="line_zyq"> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr class="line_zyq"> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr class="line_zyq"> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> </body> </html>
line_change2.js
//如果添加了padding属性请自行修改 var tr_tds = [ ["我忘了闹分手的放他", "我忘了闹分手我忘了闹分手我忘了闹分手我忘了闹分手我的", "我忘了闹分手我忘了闹分手我忘了闹分手", "我忘了闹分手的", "我忘了闹分手我忘了闹分手我忘了闹分手我忘了闹分手"], ["我忘了闹分手的放他", "我忘了闹分手我忘了闹分手我忘了闹分手我忘了闹分手我的", "我忘了闹分手我忘了闹分手我忘了闹分手", "我忘了闹分手的", "我忘了闹分手我忘了闹分手我忘了闹分手我忘了闹分手"], ["我忘了闹分手的放他", "我忘了闹分手我忘了闹分手我忘了闹分手我忘了闹分手我的", "我忘了闹分手我忘了闹分手我忘了闹分手", "我忘了闹分手的", "我忘了闹分手我忘了闹分手我忘了闹分手我忘了闹分手"], ["我忘了闹分手的放他", "我忘了闹分手我忘了闹分手我忘了闹分手我忘了闹分手我的", "我忘了闹分手我忘了闹分手我忘了闹分手", "我忘了闹分手的", "我忘了闹分手我忘了闹分手我忘了闹分手我忘了闹分手"] ] var tr_tds_html = [ ["我忘了闹分手的放他", "我忘了闹分手我忘了闹分手我忘了闹分手我忘了闹分手我的", "我忘了闹分手我忘了闹分手我忘了闹分手", "我忘了闹分手的", "我忘了闹分手我忘了闹分手我忘了闹分手我忘了闹分手"], ["我忘了闹分手的放他", "我忘了闹分手我忘了闹分手我忘了闹分手我忘了闹分手我的", "我忘了闹分手我忘了闹分手我忘了闹分手", "我忘了闹分手的", "我忘了闹分手我忘了闹分手我忘了闹分手我忘了闹分手"], ["我忘了闹分手的放他", "我忘了闹分手我忘了闹分手我忘了闹分手我忘了闹分手我的", "我忘了闹分手我忘了闹分手我忘了闹分手", "我忘了闹分手的", "我忘了闹分手我忘了闹分手我忘了闹分手我忘了闹分手"], ["我忘了闹分手的放他", "我忘了闹分手我忘了闹分手我忘了闹分手我忘了闹分手我的", "我忘了闹分手我忘了闹分手我忘了闹分手", "我忘了闹分手的", "我忘了闹分手我忘了闹分手我忘了闹分手我忘了闹分手"] ] var windowWidth=0; function line_change() { $(".line_zyq").each(function(n) { var s = $(this).css("font-size"); var ss = s.substring(0, s.length - 2); //当前行可以放的最大字数 var lineNum=$(this).width() / parseInt(ss) var sum = 0; for(var i=0;i<tr_tds[n].length;i++){ sum += tr_tds[n][i].length; } if(lineNum>sum){ $(this).children().each(function(m) { $(this).text(tr_tds[n][m]) }); }else{ //放不下需处理 //算出平均的列宽 var defaultColWidth=$(this).width()/tr_tds[n].length; //算出平均每列可以放几个字 var defaultColFontNum=lineNum/tr_tds[n].length; //存放每列有几个字 var tds=[]; //算出真实情况的每列应该放几个字 var colFontNum=[]; for(var i=0;i<tr_tds[n].length;i++){ tds[i]=tr_tds[n][i].length; } tds=tds.sort(function(a,b){return a-b;}); // alert(tds+" "+defaultColFontNum); var newLineNum=lineNum; for(var i=0;i<tds.length;i++){ //这个判断条件可以按照大家的想法修改 if(tds[i]<defaultColFontNum){ colFontNum[i]=tds[i]; newLineNum-=tds[i]; defaultColFontNum=(newLineNum)/(tr_tds[n].length-1-i); }else{ colFontNum[i]=defaultColFontNum; } } // alert(tds+" "+colFontNum); $(this).children().each(function(m){ for(var i=0;i<tds.length;i++){ if(tds[i]==tr_tds[n][m].length){ $(this).html("<span title='"+tr_tds_html[n][m]+"'>"+tr_tds[n][m].substring(0,colFontNum[i]-1)+"...</span>"); } } }); } // alert(sum + " " + $(this).width() / parseInt(ss)); }); } $(document).ready(line_change); $(window).resize(function (){ if(windowWidth != $(window).width()) { windowWidth = $(window).width(); line_change(); } })
好啦又到了结束的时间，希望对大家有帮助。
2405
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
