Layui表格需手动加title属性或用CSS+JS模拟tooltip，因text-overflow:ellipsis仅截断不触发提示；须覆盖.flex布局、补全四条CSS、转义内容并注意移动端及fixed列兼容性。
必须手动加 title 属性或用 css + js 模拟 tooltip，layui 表格默认不支持 hover 显示全文。
为什么 text-overflow: ellipsis 不触发提示
因为浏览器原生不会自动弹出完整内容——text-overflow: ellipsis 只负责截断和显示省略号，它本身不带任何交互行为。你得显式设置 title 属性，或者用 layer.tips() 手动绑定。
常见错误现象：
- 写了
white-space: nowrap却没生效 → 原因是.layui-table-cell默认是display: flex，必须覆盖为block或inline-block - 省略号出来了，但 hover 没反应 → 忘了加
title="{{d.xxx}}"，或没做 HTML 转义，导致属性值被截断甚至 XSS - 移动端 hover 失效 → 移动端没有 hover 事件，
title基本不可靠，应改用点击展开或layer.open()弹窗
用 templet 动态注入 title 最稳妥
直接在列配置里写 templet，既能控制是否截断，又能安全写入 title，还不影响其他列样式。
实操建议：
- 先判断长度再决定是否截断：
const truncated = name.length > 20 ? name.substring(0, 20) + '…' : name - 用
layui.util.escape()转义内容，避免引号、尖括号破坏 HTML：layui.util.escape(name) - 包裹一层
<div>，别直接写在<td>上，否则 CSS 优先级难控 - 示例模板：
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-table-ellipsis 的 CSS 必须补全这四条
只写 text-overflow: ellipsis 是不够的，缺一不可：
-
display: inline-block（或block）→ 破坏flex布局前提 -
overflow: hidden→ 否则内容会撑开容器 -
white-space: nowrap→ 强制单行 -
text-overflow: ellipsis→ 触发省略号
推荐写法（不加 !important，靠选择器权重）：
.layui-table-ellipsis { display: inline-block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
注意：如果列用了 fixed: true，title 仍有效，但 layer.tips() 定位容易偏移，建议优先用原生 title。
固定列（fixed: true）和无障碍要额外留意
fixed 列的 DOM 结构是独立渲染的，但 title 属性不受影响；真正容易出问题的是可访问性。
实操建议：
- 纯
title在屏幕阅读器中支持不稳定，关键列建议加aria-label：<div title="..." aria-label="..."> - 不要在
templet里写onmouseenter行内事件，维护性差且易重复绑定 - 测试时务必点开「固定列」+「分页」+「搜索重载」组合场景，
title是否还存在、是否被清空 - 若后端返回含
=、&等符号的长字符串（如日志 ID），不转义会导致title提前截断 —— 这个坑很多人在上线后才发现
