js,jq表格/文本内容溢出，用三个点替代，鼠标悬停时显示全部内容
项目中遇到如果表格内容太多的话页面会很丑，所以想到给表格一个最大宽度之类的，当内容超出时用三个点代替超出的部分，当鼠标悬停时显示全部的信息，下面百度到两个案例，都可以实现：
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>