layui表格单元格文字不换行是因默认white-space:nowrap，需用css覆盖为white-space:normal并配合word-break:break-word实现自动换行，推荐对特定列加class并写对应样式。
layui table 单元格文字不换行怎么办
默认情况下，layui.table 会把单元格内容强制单行显示，超出部分用省略号隐藏。这不是 bug，是 css 的 white-space: nowrap 和 text-overflow: ellipsis 共同作用的结果。
想让文字自动换行，核心不是改 JS 配置，而是覆盖默认样式。Layui 表格的单元格（td）默认没有设置高度限制，但设置了禁止换行 —— 所以只要改掉这个限制就行。
- 在表格渲染完成后的回调里加
done函数，或直接在页面末尾写 CSS - 目标选择器必须足够具体，否则会被 layui 内联样式或更高优先级规则覆盖
- 别只写
white-space: normal，还得配合word-break: break-word或word-wrap: break-word（后者已废弃，但兼容旧版）来处理长英文/数字串
怎么写有效的 CSS 覆盖 layui 表格单元格
Layui 的表格单元格类名是 layui-table-cell，但它常被包裹在 td 里，且内联样式可能干扰。最稳妥的方式是用属性选择器锁定列，或用 !important 确保生效（虽然不优雅，但实用）。
推荐写法：
.layui-table td {
white-space: normal !important;
word-break: break-word !important;
padding: 8px 12px; /* 可选：避免文字贴边 */
}
如果只想对某列生效（比如“描述”列），可以在 cols 配置中加 templet 或 class：
- 给该列加
className: 'col-desc' - 再写
.layui-table .col-desc { white-space: normal; word-break: break-word; }
用 templet 自定义单元格时换行失效？
很多人用 templet 返回 HTML 字符串后发现还是不换行，问题往往出在返回内容没加换行支持的容器或样式。例如：return '<div>' + d.content + '</div>' 这样不行，因为 div 默认是块级，但父 td 仍锁着 white-space: nowrap。
- templet 里返回的内容必须嵌套在有换行能力的标签中（如
<p></p>、<div style="white-space:normal">）<li>更干净的做法是：templet 不处理样式，统一靠外部 CSS 控制 <code>td - 如果用了
layui.table.on('tool')动态插入内容，记得触发后手动调用table.resize()（其实不影响换行，但容易误以为要刷新） - 给表格容器加
overflow-x: auto，防止内容溢出不可见 - 避免对所有列都开启换行，只对明确需要的列（如备注、说明）启用
- 如果某列含大量富文本或图片，换行后高度计算可能不准，导致行高不一致 —— 此时建议固定
min-height或用line-clamp做折叠控制 - 不要在
templet中用document.write或同步 DOM 操作，会阻塞渲染
移动端适配和性能要注意什么
自动换行会让单元格高度变高，表格整体变长，尤其在小屏上可能引发横向滚动或布局错乱。
最麻烦的其实是长无空格字符串（比如 base64、UUID、超长路径），word-break: break-all 能强行断开，但可读性差；break-word 更友好，但对纯数字串支持弱。真遇到这种需求，得在后端就做截断或加零宽空格 。
