您的位置：首页 > Web前端 > JavaScript

Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法

2019-09-16 17:31 2101 查看

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实现表格溢出内容省略号显示,悬停显示全部的方法就是小编分享给大家的全部内容了，希望能给大家一个参考

您可能感兴趣的文章:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： Layer.js 溢出省略号悬停

相关文章推荐

新的分享

章节导航