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

Index.html

表格内容溢出省略号显示

.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;

}

货币本周收盘上周收盘涨跌幅度

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”.0.863333333333932222220.88945555555555555553-203333333333333333111-2.3166%EURGBP0.86930.8894-201-2.31%EURGBP0.86930.8894-201-2.31%

$(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

});

}

});

})

效果如图:

以上这篇Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

时间： 2019-09-14