label 默认为 inline 元素，不响应宽高约束且 overflow/ellipsis 无效；需设 display: inline-block + max-width + nowrap + hidden + ellipsis 才生效。
label 标签本身不支持 text-overflow: ellipsis，因为它是内联元素、无默认宽高约束，且浏览器不会对其内容做溢出截断 —— 想让它显示省略号，必须先把它变成「可约束的块级上下文」。
为什么直接给 label 加 text-overflow: ellipsis 没反应
常见错误是这样写：
.label-ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
结果完全无效。原因有三：
-
label默认是display: inline，不响应width、max-width，也没有「可视区域边界」供浏览器判断是否溢出 - 即使加了
overflow: hidden，对 inline 元素也基本不起作用（规范中定义为 no effect） -
text-overflow只在块级或 inline-block 元素上，且满足「有明确宽度 +white-space: nowrap+overflow: hidden」时才触发
让 label 支持省略号的最小可靠写法
必须显式改变其显示行为，并施加宽度限制：
立即学习“前端免费学习笔记（深入）”；
- 加
display: inline-block或display: block（推荐前者，保留行内流布局） - 设
max-width（如max-width: 200px），不能只靠父容器撑；百分比或vw也可，但需父级有明确宽度 - 保持
white-space: nowrap和overflow: hidden -
text-overflow: ellipsis才会真正生效
示例 CSS：
label.label-ellipsis {
display: inline-block;
max-width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
label 悬停显示全文，别只靠 title
title 属性确实能实现 hover 提示，但它有硬伤：
- 提示样式不可控（系统原生 tooltip，无法定制颜色、延迟、位置）
- 移动端无 hover，
title基本失效 - 屏幕阅读器会读出
title，可能造成冗余播报（尤其当label已含语义文本）
更稳妥的做法是用 JS 配合 DOM 尺寸检测：
- 在
label渲染后，检查el.scrollWidth > el.clientWidth - 只在真正溢出时，动态插入一个
aria-describedby指向的div[role="tooltip"] - 避免对每个
label都挂 tooltip 实例 —— 数量多时性能明显下降
和表单控件绑定时的额外注意点
如果 label 是通过 for 属性关联 input 的，要注意：
- 不要给
label设display: block后又忘记调整垂直对齐（比如和input出现错位） - 若
label包裹input（即隐式关联），内部文本仍需走上述inline-block + max-width路径 - 某些 UI 库（如 Element Plus）的
el-form-item会包裹label，此时要确保外层没用flex或grid破坏inline-block行为 —— 必要时加min-width: 0
最易被忽略的是：哪怕所有 CSS 都写对了，只要父容器用了 display: flex 且没给 label 设 min-width: 0，它仍会撑开宽度绕过截断。
