【前端】表格内容过长，显示省略号，鼠标移动显示全部内容，tips

1、样式

td{
    text-overflow: ellipsis; /* 一行显示*/
    white-space:nowrap;      /* 不换行 */
    width:50px;
    overflow:hidden;         /* 内容超出宽度时隐藏超出部分的内容 */
}

tr{
    text-overflow: ellipsis;
    white-space:nowrap;      /* 不换行 */
    width:50px;
    overflow:hidden;         /* 内容超出宽度时隐藏超出部分的内容 */
}
table{
    table-layout: fixed;  /*不添加此样式，会全部显示    */
}

2、js

$(function () {
    var tips;
    $("td").on("mouseenter",function() {
        if (this.offsetWidth < this.scrollWidth) {
            var that = this;
            var text = $(this).text();
            tips = layer.tips(text, that,{
                tips: [1,'#5a98de'], //样式 tips位置：1上；2右；3下；4左,字体的颜色
                time: 5000         //设置显示时间
            });
        }
    });
    // 关闭tips，不能复制
    $("td").on("mouseleave",function() {
        layer.close(tips);
    });
});

3、效果

4、内容

layer.tips();