templet内联样式是最稳的强制换行方式，需同时设white-space:normal、word-break:break-word和padding，并处理空值、tr高度重置及excel导出适配。

templet内联样式是最稳的强制换行方式

直接改全局 .layui-table-cell 容易波及表头、操作列甚至 checkbox 对齐，templet 能精准控制某列，且不受后续 JS 动态插入的内联样式干扰。

必须同时设置三项 CSS 属性，缺一不可：

• white-space: normal：解除 layui 默认的 nowrap 锁定
• word-break: break-word：处理长 URL、Base64、无空格中文段落（比 break-all 更友好）
• padding: 8px 10px：原生单元格有内边距，自定义 <div> 不加会文字贴边、拥挤难读 <p>正确写法示例：</p> <pre class="brush:php;toolbar:false;">templet: '&lt;div style=&quot;white-space: normal; word-break: break-word; padding: 8px 10px;&quot;&gt;{{d.desc}}&lt;/div&gt;'</pre> <p>如果字段可能为空，用函数形式判空：</p> <pre class="brush:php;toolbar:false;">templet: function(d) { return d.desc ? '&lt;div style=&quot;white-space: normal; word-break: break-word; padding: 8px 10px;&quot;&gt;' + d.desc + '&lt;/div&gt;' : ''; }</pre> <h3>className 批量处理多列时必须加 !important</h3> <p>当「备注」「日志」「详情」等多列都要换行，定义 CSS 类复用更干净，但 layui 渲染时会给 <code><td> 插入内联样式（如 <code>style="height: 42px; white-space: nowrap;"），普通 CSS 会被直接覆盖。

  关键点：

  • 类名必须带 !important，否则无效
  • 避开 checkbox 或 radio 列：它们高度固定，加了会导致整行错位
  • 建议配 unresize: true：换行列拖拽调宽后容易挤成单字一行，体验反而更差

  CSS 定义：

  

  深蓝色网站后台管理系统layui框架模板-AdminPro

  一款深蓝色网站后台管理系统layui框架模板

  下载

  .layui-table-cell-wrap { white-space: normal !important; word-break: break-word !important; padding: 8px 10px !important; }

  列配置写法：

  {field:'remark', title:'备注', unresize: true, className:'layui-table-cell-wrap'}

  换行后 tr 高度塌陷必须同步重置

  只改 <td> 样式，<code><tr> 还卡在 layui 默认的 <code>height: 45px，内容撑开了，但视觉上还是扁的——这是最常被忽略的环节。

  修复方法分两种场景：

  • 普通表格：$(".layui-table tr").css("height", "auto").css("line-height", "1.5")
  • 启用了 skin: "row"：$(".layui-table[lay-skin=\"row\"] tr").css(...)
  • 含 fixed: 'left' 或 fixed: 'right' 列：需手动同步浮动栏高度，用 done 回调遍历匹配 data-index

  注意：如果表格有 toolbar 或 totalRow，它们的 <tr> 也要单独处理，否则高度错位明显。 <h3>导出 Excel 时换行不生效是正常现象</h3> <p><code>table.exportFile() 底层调用的是 SheetJS 的 XLSX.utils.json_to_sheet()，纯数据转换，所有 HTML/CSS 样式全丢。前端换行和 Excel 换行完全无关。

  要在 Excel 中生效，必须手动干预 worksheet 单元格样式：

  • 引入完整版 xlsx.full.min.js（精简版不支持 alignment.wrapText）
  • 导出前对目标列设 ws['!cols'][colIndex] = { wch: 30 }（列宽）
  • 逐单元格设 cell.s = { alignment: { wrapText: true } }

  真正麻烦的不是换行本身，而是列宽计算和多行文本在 Excel 中的垂直居中对齐——这需要额外解析原始字符串行数并动态调整 hpt，实际项目中往往权衡后选择“导出纯文本+提示用户手动启用换行”。