layui tab 组件需通过自定义 css 实现标题截断省略号，关键为设置 max-width、white-space: nowrap、overflow: hidden 和 text-overflow: ellipsis；配合 layer.tips() 实现悬停显示完整标题，并可通过媒体查询做响应式适配。
Layui 的 Tab 组件（即 lay-tab）本身不直接支持标题文字过长自动截断加省略号，因为它的 tab 标题默认是 <li> 内的普通文本或 <span></span>，没有内置的溢出控制逻辑。但你可以通过精准覆盖 CSS 实现标题文字单行截断 + 省略号，且不破坏 tab 切换功能和布局。
关键点在于：
必须同时满足「块级上下文 + 固定宽度约束 + 禁止换行 + 隐藏溢出 + 触发省略号」，缺一不可。
✅ 给 tab 标题加省略号的可靠写法
给 tab 容器加一个自定义 class（比如 layui-tab-ellipsis），再写对应 CSS：
<div class="layui-tab layui-tab-ellipsis">
<ul class="layui-tab-title">
<li class="layui-this">首页</li>
<li>用户管理模块配置项设置与权限分配策略说明</li>
<li>系统日志分析与异常行为追踪报告</li>
</ul>
<div class="layui-tab-content">
<!-- 内容区 -->
</div>
</div>
对应 CSS（放在你自己的样式文件末尾，确保在 layui.css 之后加载）：
.layui-tab-ellipsis .layui-tab-title li {
position: relative;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 160px; /* 按需调整，建议设具体值 */
}
.layui-tab-ellipsis .layui-tab-title li span {
display: inline-block;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
⚠️ 注意：不要只写
text-overflow: ellipsis，它对inline元素无效；li默认是display: list-item，虽可触发省略号，但必须有明确宽度限制（靠max-width或父容器width控制）。
✅ 让鼠标悬停时显示完整标题（气泡提示）
原生 title 属性在 li 上基本可用，但为了更稳定、可定制，推荐用 layer.tips()：
layui.use(['tab', 'layer'], function(){
var layer = layui.layer;
// 给每个 tab 标题绑定 hover 提示
$('.layui-tab-ellipsis .layui-tab-title li').each(function(){
var $this = $(this);
var fullTitle = $this.text().trim();
if (fullTitle.length > 12) { // 超过 12 字才提示
$this.hover(
function() {
layer.tips(fullTitle, this, {
tips: [1, '#787878'],
time: 0,
maxWidth: 300
});
},
function() {
layer.closeAll('tips');
}
);
}
});
});
❌ 常见错误避坑
- 直接给
.layui-tab-title li加display: block或inline-block可能导致 tab 排列错位（尤其在小屏或动态增删时） - 不设
max-width或width，仅靠white-space: nowrap会让文字无限拉伸，撑破容器 - 在
li上加title后没效果？检查是否被 JS 动态修改了 innerText，或是否被overflow: visible等样式干扰 - 使用
flex布局重写 tab 标题行时，务必保留layui-this的定位逻辑，否则选中态失效
✅ 进阶：响应式适配（小屏自动缩窄宽度）
如果 tab 数量多、屏幕窄，可配合媒体查询动态收窄最大宽度：
@media (max-width: 768px) {
.layui-tab-ellipsis .layui-tab-title li {
max-width: 120px;
}
}
@media (max-width: 480px) {
.layui-tab-ellipsis .layui-tab-title li {
max-width: 90px;
}
}
这样既保证 PC 端信息量，又避免手机上 tab 换行或重叠。
不复杂但容易忽略
