label需设为block或inline-block并限定宽度才能实现text-overflow: ellipsis，否则因内联特性及无宽边界而失效；最小配置为display+max-width+white-space+overflow+text-overflow。
label 标签本身不支持 text-overflow: ellipsis，直接加样式大概率失效——因为它是内联元素，默认无法触发溢出截断逻辑。
为什么 label 加了 white-space: nowrap 还不生效
根本原因是：label 默认是 display: inline，而 text-overflow 要求元素必须是块级或至少是 inline-block，且要有明确宽度边界。
- 没设
display：样式被忽略，文本照常换行或撑开容器 - 没设宽度（
width或max-width）：浏览器无法判断“哪里算溢出” - 父容器未限制宽度或用了
flex/grid自适应布局：子label可能被拉伸，截断失效
label 实现单行省略的最小可行写法
只需三步，不依赖 JS，纯 CSS：
- 给
label加display: inline-block或display: block - 指定宽度，比如
max-width: 200px（推荐用max-width，更适配响应式） - 补全三件套：
white-space: nowrap+overflow: hidden+text-overflow: ellipsis
示例：
立即学习“前端免费学习笔记（深入）”；
<label class="ellipsis-label">这是一个超长的表单标签文字，应该被截断</label>
.ellipsis-label {
display: inline-block;
max-width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
和 input 配合时容易踩的坑
常见场景是 <label for="xxx">…</label><input id="xxx">，这时要注意：
- 别对
label设float或position: absolute：会破坏与input的语义关联和可访问性 - 如果用了
flex布局包裹label+input，确保label没被flex-grow拉满——加flex-shrink: 0更安全 -
for属性必须指向真实存在的id，否则屏幕阅读器可能跳过该label，省略效果再好也失去意义
真正难的不是写这几行 CSS，而是确保它在各种布局上下文里都稳定生效——尤其是嵌套在组件库、表单生成器或动态渲染结构中时，display 和宽度继承关系极易被意外覆盖。
