text-overflow: ellipsis 无效的核心原因是 .layui-table-cell 默认 display: flex 且 white-space: normal，破坏了其生效所需的块级上下文、单行、固定宽高、overflow: hidden 四个条件。
直接加 text-overflow: ellipsis 不生效，核心原因是 .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 —— 四者缺一不可。flex 容器不满足“块级”前提，哪怕你设了 width: 150，文字照样换行或撑开列宽。
常见错误现象：
- 写了
white-space: nowrap，但浏览器计算值仍是normal→ 被 layui 内置样式或全局 reset 覆盖 - 省略号出来了，但文字被截掉一半 →
box-sizing或line-height导致内部高度错乱 - 移动端小屏下整列消失 → 列没设
minWidth，被压缩为 0
给指定列加省略号的稳妥写法
不改全局样式，只对目标列生效：用自定义 class + 精准 CSS 选择器。
在 table.render() 的 cols 配置中加类名：
cols: [[
{field: 'desc', title: '描述', width: 150, className: 'layui-table-ellipsis'}
]]
然后加这段 CSS（注意必须穿透到 .layui-table-cell）：
.layui-table-ellipsis .layui-table-cell {
display: block !important;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding-right: 10px;
}
关键点：
- 必须用
.layui-table-ellipsis .layui-table-cell，不能写成.layui-table-ellipsis td—— Layui 插入的是div，不是原生td -
display: block !important是破局关键，强行终结 flex 干扰 -
padding-right防止省略号顶到右边框，视觉更稳
鼠标悬停显示完整内容怎么配
浏览器不会自动把省略号变成 tooltip，title 属性得手动加，而且必须加在内容容器上，不是加在 td 或 .layui-table-cell 上。
推荐用 templet 动态注入，安全又可控：
templet: function(d) {
const name = d.name || '';
const truncated = name.length > 20 ? name.substring(0, 20) + '…' : name;
return '<div title="' + layui.util.escape(name) + '" class="layui-table-ellipsis">' + truncated + '</div>';
}
要点：
- 必须用
layui.util.escape()转义内容，否则引号、尖括号会破坏 HTML 结构，甚至引发 XSS - 包裹一层
<div>，别直接把 <code>title加在td上 —— 权重难控，且移动端 hover 无效 - 移动端没有 hover 事件，
title基本不可靠，如需兼容，应改用点击展开或layer.open()弹窗
表头（th）也要同步处理
上面的 templet 和 class 只作用于 tbody 单元格，thead 里的 th 仍会换行，导致和下面单行内容视觉错位。
给表格容器加 class，比如 class="layui-table-nowrap-header"，再加这条 CSS：
.layui-table-nowrap-header thead th {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
注意：
- 必须为该列配置
minWidth（如{field: 'name', title: '姓名', minWidth: 100}），否则th宽度由内容撑开，省略号无效 - 别给
th加display: block或inline-block—— 会破坏 table 布局，导致列错位 - 现代浏览器对
th的text-overflow支持已稳定，IE11 就别强求了
最易忽略的一点：所有这些样式生效的前提，是列宽已被明确约束（width 或 minWidth）。如果列宽完全靠内容撑开，那连“溢出”都不存在，更别说省略号了。
