layui table单元格省略号需覆盖display为block/inline-block并设overflow:hidden、text-overflow:ellipsis、white-space:nowrap；推荐templet定制列+专属CSS，配合title或layer.tips实现悬停提示。
layui table 单元格内容溢出不显示省略号？加 white-space: nowrap 和 text-overflow: ellipsis 不生效
因为 layui 的 table 默认给单元格（.layui-table-cell）设了 display: flex，会破坏 text-overflow: ellipsis 的触发条件——它只在块级、固定宽高、单行、不换行的元素上生效。
实操建议：
- 必须显式覆盖
.layui-table-cell的display，设为block或inline-block - 同时补全
overflow: hidden、text-overflow: ellipsis、white-space: nowrap - 确保列宽已限定（用
minWidth或width配置），否则容器没宽度，省略号不会触发
示例 CSS：
.layui-table-cell {
display: block !important;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
layui table 中某列单独启用省略号，不影响其他列
直接全局改 .layui-table-cell 会影响所有列，实际项目中往往只需要对「描述」「备注」这类长文本列处理。最稳妥的方式是用列的 templet 自定义内容，并加包裹标签和类名。
实操建议：
- 在
cols配置中，给目标列加templet函数或字符串模板 - 模板里用
<div class="layui-table-ellipsis">{{d.content}}</div>包裹内容 - 再写专属 CSS：
.layui-table-ellipsis { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } - 避免用
!important，靠选择器优先级控制即可
鼠标悬停显示完整内容（tooltip）怎么配
纯 CSS 的 title 属性太简陋，且移动端不友好；layui 自带的 lay-title 只支持表头。真正可用的是 layer.tips 手动绑定，或者利用 cellMinWidth + 原生 title 的轻量方案。
实操建议：
- 如果只要基础提示，直接在
templet里写：<div title="{{d.longText}}" class="layui-table-ellipsis">{{d.longText}}</div> - 若需美化或支持 HTML 内容，用
event绑定mouseenter，调layer.tips(d.longText, this, {tips: [1, '#787878']}) - 注意销毁旧 tips：在
mouseleave里调layer.closeAll('tips')，否则会堆叠 - 别在
templet里直接写onmouseenter行内事件，维护性差，也容易重复绑定
移动端适配时省略号失效或错位
问题常出在 viewport 缩放、字体渲染差异、或 layui 内部用 transform: translateZ(0) 强制 GPU 加速，干扰了 text-overflow 的计算。
实操建议：
- 移除或覆盖
.layui-table-cell上可能存在的transform样式 - 把
font-size改成固定值（如14px），避免 rem/vw 在缩放时导致宽度计算抖动 - 测试真机，不要只信 Chrome DevTools 的模拟设备 —— iOS Safari 对
text-overflow更敏感 - 备用方案：用 JS 截断 +
…（但要注意中英文混排时按字符数截可能切在中间，推荐用String.prototype.slice()+ 字节长度估算）
复杂点在于，同一套 CSS 在 PC 和 iOS 上表现可能完全不同；最容易被忽略的是 transform 层级和字体度量差异，调样式前先检查 computed style 里的 width 和 actual rendered width 是否一致。
