溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關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進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
