使用layui框架，对table表格中超长文字隐藏成......，放鼠标在上面自动显示文字，移开关闭提示

使用layui框架，对table表格中超长文字隐藏成…，放鼠标在上面自动显示文字，移开关闭提示

效果如下

话不多说，上代码

1、在需要隐藏多余文字的table加上，重点是fix-table的样式操作：

 .fix-table{table-layout: fixed;}
 .fix-table td {white-space: nowrap; /* 自适应宽度*/overflow:hidden;text-overflow:ellipsis;/*省略号显示*/}

2、在页面初始化隐藏和显示文字的方法，如下：

3、showAndHideMsg()方法具体代码如下：

var tip_index;
/**
 * 页面表格内容超出宽度显示...
 * 鼠标放上去之后回显具体内容
 * 移开鼠标内容消失
 */
function showAndHideMsg(){
	$(document).on("mouseenter","td",function(){
		if (this.offsetWidth < this.scrollWidth) {
			let that = this;
			let text = $(this).text();
			let wid;
			
			if(text.length>1000){
				wid = '900px';
			}else if(text.length>600){
				wid = '700px';
			}else if(text.length>150){
				wid = '500px';
			}else if(text.length>100){
				wid = '250px';
			}else if(text.length>50){
				wid = '150px';
			}
			layui.use('layer', function(layer) {
				tip_index = layer.tips('<span style="word-wrap: break-word;">'+text+'</span>', that, {
					tips: [4, "#000000"], 
					time: 0,
					area: [wid, 'auto']
				});
			});
		}
	});
	$(document).on("mouseout","td",function(){
		layui.use('layer', function(layer) {
			layer.close(tip_index);
		});
	});
}

4、注意，table的td需要设置相应的宽度，如下：

<tbody id="tbody">
	<td class="ltd" width="20%">XXXX1</td>
	<td class="ltd" width="20%">XXXX2</td>
	<td class="ltd" width="20%">XXXX3</td>
	<td class="ltd" width="20%">XXXX4</td>
	<td class="ltd" width="20%">XXXX5</td>
</tbody>

5、如果表格的头部文字不想出现隐藏文字的操作，不要使用td标签，使用th，如下

<thead>
    <tr align="center">
         <th class="ltd" width="35%">XXXXXX1</th>
         <th class="ltd" width="30%">XXXXXX2</th>
         <th class="ltd" width="30%">XXXXXX3</td>
     </tr>
</thead>