不同的方式的实现Table不换行省略号显示

来源：互联网发布：查日本经济数据的网站编辑：程序博客网时间：2024/05/16 17:20

又是一个阳光明媚的早晨，最近有点闲就也谢谢文章，

今天先上效果图

接下来就是令人期待的源码啦，上

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();}})

好啦又到了结束的时间，希望对大家有帮助。

阅读全文

0 0