Layui table单元格内容溢出如何显示省略号-Layui教程-PHP中文网

直接加text-overflow: ellipsis不生效，因layui的.layui-table-cell默认display: flex且white-space: normal，必须同时设display: block、overflow: hidden、white-space: nowrap三者缺一不可。

直接加 text-overflow: ellipsis 没用，layui 的 .layui-table-cell 默认是 display: flex 且 white-space: normal，三者缺一不可的截断条件根本没满足。

为什么只写 `text-overflow: ellipsis` 不生效

Layui 表格渲染后，每个单元格内容都被包裹在 <div class="layui-table-cell"> 里，而这个 div 默认启用了 flex 布局 —— 这直接破坏了 <code>text-overflow: ellipsis 的触发前提（必须是块级、固定宽高、单行、overflow: hidden）。哪怕你设了 width: 120，文字照样换行或撑开列宽。

常见错误现象：

写了 white-space: nowrap 但控制台显示最终计算值仍是 normal → 被 layui 内置样式或全局 reset 覆盖
省略号出现后文字被截掉一半 → box-sizing 或 line-height 导致内部高度计算错乱
移动端小屏下整列消失 → 列宽未设 minWidth，被压缩为 0

给指定列加省略号的稳妥做法

不改全局样式，只对目标列生效：用 className + 自定义 CSS 精准命中。

在 table.render() 的 cols 配置中给目标列加上类名：

cols: [[
  {field: 'desc', title: '描述', width: 150, className: 'layui-table-ellipsis'}
]]

然后加一段 CSS（注意选择器要能穿透 layui 的默认权重）：

.layui-table-ellipsis .layui-table-cell {
  display: block !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 10px;
}

关键点：

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

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

下载

必须用 .layui-table-ellipsis .layui-table-cell，不能写成 .layui-table-ellipsis td —— 因为 Layui 动态插入的是 div，不是原生 td
display: block !important 是破局关键，强行终结 flex 布局干扰
padding-right 防止省略号顶到右边框，视觉更稳

鼠标悬停显示完整内容怎么配

浏览器不会自动把省略号变成 tooltip，title 属性得手动加，而且得加在内容容器上，不是加在 td 上。

推荐用 templet 动态注入，安全可控：

templet: function(d) {
  const content = d.desc || '';
  return '<div title="' + layui.util.escape(content) + '" class="layui-table-ellipsis">' + 
         (content.length > 30 ? content.substring(0, 30) + '…' : content) + 
         '</div>';
}

这样做的好处：