layui table单元格内容过长不换行，需用templet自定义class并覆盖white-space:nowrap、height等默认样式，加white-space:normal和height:auto!important，注意移动端适配与性能。
layui table 单元格内容过长不换行怎么办
默认情况下，layui.table 会把单元格内容强制单行显示，超出部分用 text-overflow: ellipsis 截断。这不是 CSS “没生效”，而是 layui 内部给 .layui-table-cell 设了 white-space: nowrap 和固定高度。
要换行并撑高，核心是覆盖 layui 的默认样式，但得在正确时机、作用域下改 —— 直接写全局 .layui-table-cell 很容易影响其他表格。
- 只对目标列生效：在
cols配置里用templet包一层带自定义 class 的div，比如<div class="table-cell-wrap">{{d.content}}</div> - 对应加 CSS：
.table-cell-wrap { white-space: normal; word-break: break-word; padding: 8px 12px; }（注意别漏padding，否则文字贴边） - 必须去掉 layui 给该列单元格设的固定
height或line-height，可在同一 CSS 里加height: auto !important; line-height: normal !important; - 如果用了
minWidth或列宽太小，内容仍可能被挤成一长条不换行，建议给该列设minWidth: 120起步
为什么加了 white-space: normal 还是不换行
常见原因是样式被 layui 后续 JS 动态插入的内联 style 覆盖，或者父级元素（如 .layui-table-body td）有 overflow: hidden + 固定 height 把换行内容裁掉了。
- 检查浏览器开发者工具，看实际生效的
height和overflow是谁写的；layui 2.8+ 在渲染时会给td加style="height: 42px;"这类属性 - 解决方法不是删内联 style，而是在 CSS 里用
!important强制height: auto和overflow: visible - 如果用了
skin: 'row'或自定义 skin，对应皮肤类名下的td选择器优先级更高，CSS 要写成.layui-table[lay-skin="row"] .table-cell-wrap这类
table.render 里用 templet 渲染长文本的坑
templet 是最可控的方式，但容易忽略两件事：一是没处理空值导致模板报错，二是没加 layui.form.render()（如果里面含表单元素）——不过纯文本不用。
- templet 函数里务必判空：
return d.content ? '<div class="table-cell-wrap">' + d.content + '</div>' : ''; - 避免用
{{d.content}}双大括号语法直接插值，它会做 HTML 转义；如果内容含标签且想保留，得用{{= d.content}}（注意等号），但要确保内容可信，否则有 XSS 风险 - 如果内容里有换行符
\n，浏览器默认不识别，得在 CSS 里加white-space: pre-wrap;，或 JS 里把\n替换成<br>
移动端适配和性能注意点
撑开行高后，表格整体高度变大，滚动区域可能变卡，尤其数据量 > 50 行时。
- 不要给整张表加
overflow-y: auto，layui 默认用虚拟滚动，强行加会导致 tbody 高度计算错乱 - 移动端小屏下，建议配合
minWidth和响应式列隐藏（hide: true）控制信息密度，而不是无限制撑高 - 如果某列内容极长（如日志片段），考虑用「点击展开」代替全量换行，用
layui.layer浮层展示完整内容，更省性能也更友好
真正麻烦的是混合场景：既要换行，又要支持排序、导出、固定列 —— 这些功能依赖 layui 对单元格高度的预估，一旦撑高不一致，固定列就容易错位。这时候得在 done 回调里手动调用 table.resize()，或者干脆放弃固定列。
