label需设为display:inline-block或block并满足width、white-space:nowrap、overflow:hidden、text-overflow:ellipsis四要素才能生效；嵌套元素需对齐处理，表格中还需table-layout:fixed。
label 标签本身不支持 text-overflow: ellipsis 直接生效——不是写法错，是它默认为 display: inline，没有块级约束宽度的能力。必须转成块级或内联块，并满足四要素，否则省略号永远不出现。
label 必须先变成块级容器才能用 ellipsis
原生 label 是 inline 元素，width、overflow 等属性对其无效。强行加 text-overflow: ellipsis 不会触发任何效果。
- 必须显式设为
display: block或display: inline-block - 推荐用
display: inline-block，保留与周围行内元素对齐的特性 - 若父容器是 flex，还需额外加
min-width: 0（否则 flex item 默认撑宽，溢出无从谈起） - 别依赖
width: 100%—— 若父元素没定宽，它等于 auto，仍不满足“明确宽度”前提
单行省略必须凑齐四个 CSS 属性
text-overflow: ellipsis 是个“条件触发器”，缺一不可。只写它，等于没写。
-
white-space: nowrap：禁换行，这是单行截断的前提 -
overflow: hidden：必须是hidden，visible、auto、scroll都不行 -
width或max-width：值必须具体（如200px、80%），不能是auto或未声明 -
text-overflow: ellipsis：最后一步，仅在前三者满足后才渲染省略号
label 里有图标或 span 时容易失效
如果 label 内嵌了 input、svg、span 等 inline 元素，white-space: nowrap 会让它们全挤在一行，可能把文字“顶出”可视区，导致省略号出现在错误位置，甚至不显示。
- 给图标类元素加
flex-shrink: 0（若父层是 flex）或vertical-align: top/middle对齐 - 避免在
label内混用多种 display 类型；更稳妥的做法是把文本单独包一层span，只对它应用省略规则 - 若用了
title属性做 hover 提示，确保title值和实际文本完全一致（含空格、全角/半角），否则读屏器会读错
表格中 label 的省略需要额外加 table-layout
把 label 放进 td 时，即使写了四要素，它仍可能撑开列宽——因为 table-cell 默认内容自适应。
- 给
table加table-layout: fixed，让列宽由th/td的width或max-width控制 - 给
td本身加white-space: nowrap+overflow: hidden+text-overflow: ellipsis - 不要只依赖
label自身样式，td才是真正的宽度约束者
真正卡住人的从来不是记不住那四条 CSS，而是每次都在「宽度是否真被约束住」上栽跟头——尤其是 label 套在 flex 容器里却忘了 min-width: 0，或者放在表格里却漏了 table-layout: fixed。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
