项目中遇到如果表格内容太多的话页面会很丑，所以想到给表格一个最大宽度之类的，当内容超出时用三个点代替超出的部分，当鼠标悬停时显示全部的信息，下面百度到两个案例，都可以实现：
1.在表格下面在添加一模一样的一行，先将其隐藏，等鼠标悬停时在显示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> table {width: 100%;table-layout:fixed;} table tr {line-height: 25px;} table td {text-align:center;} .MHover{ white-space:nowrap;text-overflow:ellipsis;overflow:hidden;cursor: pointer;} .MALL{padding:10px;border-radius: 5px;background: #B4CBED;} </style> </head> <body> <table border="1" cellspacing="0"> <tr> <th>姓名</th> <th>个性签名</th> <th>性别</th> </tr> <tr> <td>张国荣</td> <td> <div class="MHover">我就是我，是颜色不一样的烟火！</div> <div class="MALL">我就是我，是颜色不一样的烟火！</div> </td> <td>男</td> </tr> </table> </body> <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> <script type="text/javascript"> // 表格内容超出，三个点，鼠标悬停显示 $(document).ready(function () { $(".MALL").hide(); console.log($('.MALL')); $(".MHover").mouseover(function (e) { $(this).next(".MALL").css({"position":"absolute","top":e.pageY+20,"left":e.pageX+20}).show(); }); $(".MHover").mousemove(function (e) { $(this).next(".MALL").css({ "color": "#fff", "position": "absolute", "opacity": "0.7", "top": e.pageY + 20, "left": e.pageX + 20}); }); $(".MHover").mouseout(function () { $(this).next(".MALL").hide(); }); }); </script> </html>2.不需要写重复的一行
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格内容溢出省略号显示</title> <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="js/layer.js"></script> <style type="text/css"> .contain { width:900px; margin: 15px auto; font-family: ‘Microsoft YaHei’; } table { width:100%; text-align: center; border:1px solid #e3e6e8; border-collapse: collapse; table-layout: fixed;display: table; } th,td { border: 1px solid #e3e6e8; height:38px; line-height: 38px; overflow: hidden; white-space:nowrap; text-overflow:ellipsis; } th { background-color: #189AD6; color:#fff; } .layui-layer { word-wrap: break-word; } </style> </head> <body> <div class="contain"> <table> <thead> <th>货币</th> <th>本周收盘</th> <th>上周收盘</th> <th>涨跌</th> <th>幅度</th> </thead> <tbody> <tr> <td>EURGBPfffffffffffffffffffffffffffffffffffffffffffffffffffffff</td> <td>0.86333333333393</td> <td>0.88945555555555555553</td> <td>-2033333333333333331</td> <td>-2.3166%</td> </tr> </tbody> </table> </div> </body> <script type="text/javascript"> $(function () { $("td").on("mouseenter",function() { if (this.offsetWidth < this.scrollWidth) { var that = this; var text = $(this).text(); console.log(text); layer.tips(text, that,{ tips: 1, time: 2000 }); } }); }) </script> </html>
