layui表格单元如何自动换行

问题

layui框架渲染出来的表格元素默认是单行显示，如果超出宽度则会隐藏，效果体验不佳；如下图所示:

解决

定义表格的单元样式使其满足换行, 代码如下：

<style>
    .layui-table-cell {
        height: auto; 
        line-height: 28px;
        padding: 0 15px;
        position: relative;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        box-sizing: border-box;
    }
</style>

最终结果展示图所示：


happy coding!