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

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

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

1、更改单元格的样式

.layui-table-cell{
   
        height: auto;
        overflow:visible;
        text-overflow:inherit;
        white-space:normal;
}

此法简单粗暴，确实可以换行，但行间距较大，且文字全部换行，如果内容过多，会导致表格行高超大，美观性大大降低。如下：

2、在templet中使用<br>标签换行，并搭配设置单元格高度样式为height: auto;

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

二、还算美观的解决方式

最终效果如下，认可这种效果的可继续往下阅读：