layui table 单元格内文字、元素块实现优美的换行显示


关于layui table 单元格内内容的换行显示，包括文字、元素块等。网上也提供了一些解决方案，博主也尝试过这些解决方法，但都不尽善美。于是决定好好研究一下这里面的样式问题。

一、网上现有的解决方法：

1、更改单元格的样式

1
2
3
4
5
6
.layui-table-cell{
        height: auto;
        overflow:visible;
        text-overflow:inherit;
        white-space:normal;
}

此法简单粗暴，确实可以换行，但行间距较大，且文字全部换行，如果内容过多，会导致表格行高超大，美观性大大降低。如下：
在这里插入图片描述
2、在templet中使用
标签换行，并搭配设置单元格高度样式为height: auto;

此种方法对于换行元素块（例如上图中的证据列的换行）可实现需求，但缺点仍然是元素块之间的行间距过大，效果类似上图的文字间距，很不美观。

二、还算美观的解决方式

最终效果如下，认可这种效果的可继续往下阅读：
在这里插入图片描述
其中工作内容列对应文字的换行解决方式，文字过多，可通过滚轮单元格内下拉。
证据列对应元素块的换行。

1、统一的设置（单元格高度的自动，必不可少）

1
2
3
.layui-table-cell {
    height: auto!important;
}

2、文字的换行
这里巧用templet，在templet中使用