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实现表格溢出内容省略号显示,悬停显示全部的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持小牛知识库。
-
本文向大家介绍基于JS代码实现当鼠标悬停表格上显示这一格的全部内容，包括了基于JS代码实现当鼠标悬停表格上显示这一格的全部内容的使用技巧和注意事项，需要的朋友参考一下 想实现这样一个功能，就是在一个表格中，由于很多字过多，所以用文字溢出的方法处理了，但是这样就无法看到表格中具体的内容呢。想实现当鼠标移上去的时候可以显示这一行被隐藏的内容。当然这个网上有很多插件，但是我没有用，还是自己写了一个。 c
-
本文向大家介绍bootstrap表格内容过长时用省略号表示的解决方法，包括了bootstrap表格内容过长时用省略号表示的解决方法的使用技巧和注意事项，需要的朋友参考一下 首先 ，bootstrap中当td内容超过我给的固定宽度时，省略号代替的代码如下： 移动端模拟器显示效果是这样的。不是很舒服,完全没按我给他的宽度显示，全靠内容挤出来的。 解决方法： 也就是添加样式 效果出现： table-
-
本文向大家介绍js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例，包括了js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例的使用技巧和注意事项，需要的朋友参考一下 题目中问题一拆为二: 1.文字在超出长度时,如何实现用省略号代替? 2.超长长度的文字在省略显示后,如何在鼠标悬停时,以悬浮框的形式显示出全部信息? 文字在超出长度时,如何实现用省略号代替? 用CSS实现超长字段用省略号
-
这个省略号是 css text-overflow: ellipsis; 显示出来的，我怎么去给它添加点击事件
-
本文向大家介绍js实现当鼠标移到表格上时显示这一格全部内容的代码，包括了js实现当鼠标移到表格上时显示这一格全部内容的代码的使用技巧和注意事项，需要的朋友参考一下 想实现这样一个功能，就是在一个表格中，由于很多字过多，所以用文字溢出的方法处理了，但是这样就无法看到表格中具体的内容呢。想实现当鼠标移上去的时候可以显示这一行被隐藏的内容。当然这个网上有很多插件，但是我没有用，还是自己写了一个。 css
-
我有一个应用程序，我想在