解决layui表格中单元格显示内容过长,鼠标移到上方显示全部内容
warning:
这篇文章距离上次修改已过252天,其中的内容可能已经有所变动。
在Layui的表格(table)组件中,如果单元格内容过长,可以通过设置CSS样式来实现鼠标悬停时显示完整内容。
以下是实现这一功能的CSS样式和Layui表格的初始化代码示例:
CSS样式:
Layui表格初始化代码:
在这个例子中,.layui-table-cell
是表格单元格的默认类名,可以根据实际情况进行调整。通过设置 overflow: hidden
和 text-overflow: ellipsis
,可以在单元格内容过长时显示省略号。当鼠标悬停在单元格上时,通过设置 overflow: visible
,white-space: normal
和 text-overflow: inherit
,可以显示完整内容。
评论已关闭