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：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

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，它仍会撑开宽度绕过截断。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！