这篇文章将为大家详细讲解有关Layer.js怎么实现表格溢出内容省略号显示悬停显示全部的方法，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格内容溢出省略号显示</title>
<style type="text/css">
.contain {
font-family: ‘ Microsoft YaHei ';
margin: 15px auto;
width: 900px;
}
table {
border: 1px solid #e3e6e8;
border-collapse: collapse;
display: table;
table-layout: fixed;
text-align: center;
width: 100%;
}
th, td {
border: 1px solid #e3e6e8;
height: 38px;
line-height: 38px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
th {
background-color: #189AD6;
color: #fff;
}
.layui-layer {
word-break: break-all;
word-wrap: break-word;
}
</style>
<!--relate to this page javascript-->
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
<script src="https://cdn.bootcss.com/layer/3.1.0/layer.js"></script>
</head>
<body>
<div class="contain">
<table>
<thead>
<th>货币</th>
<th>本周收盘</th>
<th>上周收盘</th>
<th>涨跌</th>
<th>幅度</th>
</thead>
<tbody>
<tr>
<td>EURGBP“EUR/GBP settled above 0.90 on Friday as the bounce in EUR/USD helped the lift the pair further into the 0.90 territory”.</td>
<td>0.86333333333393222222</td>
<td>0.88945555555555555553</td>
<td>-203333333333333333111</td>
<td>-2.3166%</td>
</tr>
<tr>
<td>EURGBP</td>
<td>0.8693</td>
<td>0.8894</td>
<td>-201</td>
<td>-2.31%</td>
</tr>
<tr>
<td>EURGBP</td>
<td>0.8693</td>
<td>0.8894</td>
<td>-201</td>
<td>-2.31%</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
$(function() {
$("td").on("mouseenter", function() {
//js主要利用offsetWidth和scrollWidth判断是否溢出。
//在这里scrollWidth是包含内容的完全高度，offsetWidth是当前表格单元格的宽度。
if (this.offsetWidth < this.scrollWidth) {
var that = this;
var text = $(this).text();
window.layer.tips(text, that, {
tips: 1,
time: 2000
});
}
});
})
</script>
</body>
</html>效果如图:
关于“Layer.js怎么实现表格溢出内容省略号显示悬停显示全部的方法”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
