直接写text-overflow:ellipsis没反应，是因为.layui-table-cell默认display:flex，而该属性仅对块级或行内块元素生效；必须显式设为display:inline-block或block，否则white-space:nowrap、overflow:hidden、text-overflow:ellipsis三者全无效。
为什么直接写 text-overflow: ellipsis 没反应
因为 .layui-table-cell 默认是 display: flex，而 text-overflow 只对块级或行内块元素生效。写了 white-space: nowrap 却没截断，大概率是被 flex 布局顶掉了。必须显式覆盖为 display: inline-block 或 block，否则其他三条（overflow: hidden、white-space: nowrap、text-overflow: ellipsis）全白配。
怎么用 templet 安全注入 title
原生 hover 提示唯一可靠的方式就是 title 属性，但不能硬写 title="{{d.xxx}}"——万一内容含双引号或 就会破坏 HTML 结构，甚至触发 XSS。Layui 提供了 <code>layui.util.escape() 做转义，配合长度判断才稳妥：
templet: function(d) {
const name = d.name || '';
const truncated = name.length > 15 ? name.substring(0, 15) + '…' : name;
return '<div title="' + layui.util.escape(name) + '" class="layui-table-ellipsis">' + truncated + '</div>';
}
- 只在真实溢出时加
title，避免空属性或过长提示影响体验 - 包裹一层
<div>，别直接塞进 <code><td>，否则 CSS 优先级难控<li>别用 Vue 风格插值（如 <code>{{ d.name }}），templet是字符串模板，走的是eval渲染逻辑 - 点击单元格时用
layer.open()弹窗展示全文，比layer.tips()更稳（后者在 fixed 列里定位常偏移） - 或者加个「复制」按钮：内容过长时右侧固定显示一个
copy图标，点一下把完整值写入剪贴板 - 千万别用伪元素 +
data-*搞纯 CSS tooltip，table 分页、重绘后容易漏绑定，维护成本高 - 表头省略号要用单独类名，比如
.layui-table-nowrap-header thead th，并手动在render的className里带上 - 表头提示必须用 JS 绑定，推荐
layer.tips()监听mouseenter，但要注意销毁旧实例，否则重复绑定会堆叠气泡 - fixed 列里如果用了
templet，title属性依然有效，但别依赖layer.tips()的自动定位——改用fixed: true+offset手动调位置更可控
移动端 hover 失效怎么办
手机没 hover 事件，title 在 iOS/Android 上基本不弹，别指望它。实际项目里得降级：
fixed 列和表头溢出要额外注意什么
固定列（fixed: true）的 DOM 结构是独立抽离的，CSS 选择器得单独命中；表头（thead th）默认也不支持 title，原生 hover 不稳定：
复杂点在于：同一张表里可能同时存在换行列、省略号列、fixed 列、移动端点击展开列。这些行为不能靠一套 CSS 或一个全局 templet 统一解决，得按列配置逐个判断是否需要截断、是否要加 title、是否要绑定点击事件——漏掉任意一种边界，用户就会在某个场景下看不到完整内容。
