text-overflow: ellipsis 必须有明确宽度，因为它是裁剪后的视觉提示开关，需浏览器先判定“溢出”——而溢出判断唯一依据是容器计算宽度是否大于文本自然宽度；若宽度为auto，容器会撑开容纳全文，无溢出则该属性被静默忽略。
text-overflow: ellipsis 为什么必须有明确宽度
因为 text-overflow: ellipsis 不是“自动检测溢出并显示…”的智能开关，它只是个**裁剪后视觉提示开关**——前提是浏览器得先知道“哪算溢出”。而判断溢出的唯一依据，就是容器内容区的**计算宽度是否大于文本自然宽度**。如果容器宽度是 auto（比如未设 width/max-width，且父容器没约束），浏览器会把容器撑开到刚好包住文本，根本不存在“超出”，text-overflow 就被静默忽略。
哪些“看起来有宽度”的情况其实无效
常见伪宽度陷阱：
-
width: 100%但父元素是display: inline或未设宽 —— 计算结果仍是auto - Flex 子项用了
flex: 1却没配min-width: 0—— 默认min-width: auto会阻止收缩，导致宽度计算失效 - Grid 轨道用
1fr但没配grid-template-columns: minmax(0, 1fr)—— 同样因最小宽度限制，无法触发溢出 - 表格单元格（
td）没加table-layout: fixed—— 列宽由内容决定，white-space: nowrap也救不了
box-sizing: border-box 是宽度控制的隐性前提
很多人写了 width: 200px 还是不生效，其实是 padding/border 把实际占用空间撑超了。默认 box-sizing: content-box 下，width 只算内容区，加上 padding: 10px 和 border: 1px 后总宽变成 222px，可能已超出父容器或触发重排，间接破坏宽度约束链。所以：
- 所有参与
text-overflow的容器，建议统一加box-sizing: border-box - 避免混用
width和padding而不加box-sizing，尤其在响应式场景下容易因媒体查询错位 - 若必须用
content-box，改用calc()精确控制：比如width: calc(100% - 22px)
Flex/Grid 中最常漏掉的那行 CSS
不是 overflow: hidden，而是 min-width: 0。Flex 项默认 min-width: auto，意思是“宁可文字挤扁、换行、甚至溢出容器，也不愿缩小宽度”。这直接让 width: 100% 失效。解决方案非常具体：
- 对 Flex 子项加
min-width: 0（几乎所有带text-overflow的 Flex 场景都需要） - 对 Grid 子项，优先用
minmax(0, 1fr)替代单纯1fr - 若子项还用了
align-self: stretch，注意它会覆盖min-width: 0的效果，必要时显式写align-self: flex-start
真正卡住人的，从来不是“要不要写 width”，而是“谁在背后悄悄改了 width 的计算结果”——父容器的 display 类型、子项的 min-width 默认值、盒模型选择、甚至 normalize.css 重置的 white-space，都可能让四个必要条件中某一个在 computed 样式里悄然失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
