Layui数据表格如何设置某一列的文字根据字数自动省略-Layui教程-PHP中文网

必须为需省略的列设置 minWidth 或 width，再配合 templet 中的 layui-table-ellipsis 类及对应 CSS（display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap），并为表头添加 white-space:nowrap 等样式以对齐。

只对某一列启用省略号，别动全局样式

直接改 .layui-table-cell 会波及所有列，实际项目里往往只有「描述」「备注」「标题」这类字段需要省略，其他列（如操作按钮、状态标签）反而要保持原样。最稳妥的方式是用 templet 配合自定义 class。

在 cols 配置中给目标列加上：
{field: 'desc', title: '描述', minWidth: 150, templet: '<div class="layui-table-ellipsis">{{d.desc}}</div>'}

必须设 minWidth（或 width），否则容器没固定宽度，text-overflow: ellipsis 不触发
templet 字符串里用 <div> 包裹，不能用 <code><span></span> —— 后者默认 inline，不支持 text-overflow
不要在 templet 里写 onmouseenter 行内事件，后续绑定 tooltip 会重复注册

配套 CSS 必须包含这四个声明

光写 templet 不生效，还得补上对应 class 的 CSS 规则：

.layui-table-ellipsis {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

display: inline-block 是关键 —— table-cell 原生不支持 text-overflow，必须转成块级上下文
max-width: 100% 确保它不会撑破父容器，同时让 overflow 有作用边界
别加 !important，只要你的 CSS 文件在 layui.css 之后加载，且选择器带 class 前缀，权重就足够

表头文字也要同步处理，否则对不齐

上面的 templet 只作用于 tbody 单元格，thead 里的 th 还是会换行。如果列宽较窄，表头文字挤成两行，和下面单行内容视觉错位。

给表格容器加个 class，比如 class="layui-table-nowrap-header"，再加这条 CSS：

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

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

下载

.layui-table-nowrap-header thead th {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

同样依赖列已设 minWidth，否则 th 宽度由内容撑开，省略号无效
不用改 display —— th 是 table-cell，但现代浏览器（Chrome/Firefox/Edge）对它的 text-overflow 支持已稳定；IE11 就别强求了
别给 th 加 display: block，会破坏 table 布局，导致列错位