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

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

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

1、更改单元格的样式

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

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

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

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

二、还算美观的解决方式

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

其中工作内容列对应文字的换行解决方式，文字过多，可通过滚轮单元格内下拉。
证据列对应元素块的换行。

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

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

2、文字的换行
这里巧用templet，在templet中使用</code>标签，再设置文本域的样式（<strong>背景透明，边框为0px</strong>）来达到目的。</p> <pre><code class="prism language-javascript"><span class="token punctuation">{</span> title <span class="token punctuation">:</span> <span class="token string">"工作内容"</span><span class="token punctuation">,</span> field <span class="token punctuation">:</span> <span class="token string">"workContent"</span><span class="token punctuation">,</span> width <span class="token punctuation">:</span> <span class="token number">290</span><span class="token punctuation">,</span> align <span class="token punctuation">:</span> <span class="token string">"center"</span><span class="token punctuation">,</span> event <span class="token punctuation">:</span> <span class="token string">""</span><span class="token punctuation">,</span> templet <span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>d<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token string">'<textarea class="layui-textarea" style="margin: 10px 0px;background-color: transparent;border: 0px;">'</span><span class="token operator">+</span>d<span class="token punctuation">.</span>workContent<span class="token operator">+</span><span class="token string">''; }, }

3、元素块的换行
这里不使用
换行，改为使用盒子模型的方式来调整单元格内元素块的样式，可避免
带来的行间距过大。

{
    title : "证据",
    field : "",
    width : 190,
    align : "center",
    event : "",
    templet : function (d) {
        let html = '
';
        html += '
';
        html += '上传';
        html += '
';
        html += '
';
        html += '你的文字';
        html += 'ဇ';
        html += '
';
        html += '
';
        return html;
    },
}

总结：
其实，解决方法也是通过修改样式实现，大家可细看下元素块的样式部分。但解决文字的换行，使用现成的文本域标签，还是很方便的。有问题可留言。