欢迎来到小懒的博客~email:568705236@qq.com

layui拓展layui-soul-table内容超出设置tips文字如何换行

2020/10/20 15:27:17站长

    在layui的拓展插件layui-soul-table提供了一种新的内容溢出显示方式,原本layui.table是需要点击下拉箭头再弹出一个悬浮框显示全部内容,layui-soul-table的是当鼠标悬浮在内容超出显示区域的表格项时,自动弹出tips框,将全部内容展示。在layui-soul-table的官方示例中,原本表格项中多段的内容在tips中的内容是被合在一起了,这样对于有格式要求的数据显示是不友好的。根据源码可以看到,这里tips的内容是读取td中的文字内容,html标签全部被移除。因此考虑在CSS上进行处理。通过审查元素可以知道tips的类结构是.layui-layer-tips .layui-layer-content,然后在源码中文字内容是用一个span包裹着,那么就可以在页面添加一个类

.layui-layer-tips .layui-layer-content>span{ white-space:pre-line; }

    这个类影响的范围是使用layui.layer.tips并且内容是使用span包裹的。如果有需要区别就再增加其他类覆盖或者直接修改layui-soul-table源码。

赞赏