text-overflow: ellipsis 生效必须同时满足：white-space: nowrap、overflow: hidden、容器有明确宽度；缺一不可，其中漏掉 overflow: hidden 最常见。
text-overflow: ellipsis 必须配合哪些 CSS 属性才生效
text-overflow: ellipsis 本身不触发截断，它只是“告诉浏览器：该显示省略号时就显示”，但前提是内容真被强制压缩到一行且溢出。缺了下面任意一个，它都静默失效：
-
white-space: nowrap—— 阻止换行，让文本强行挤在一行内 -
overflow: hidden—— 隐藏超出容器的部分（否则溢出文字直接露出来，根本轮不到ellipsis出场） - 容器必须有明确宽度（
width、max-width或受父容器限制的可用空间）
漏掉 overflow: hidden 是最常见错误，很多人只写 white-space 和 text-overflow，结果文字照常溢出，控制台也没报错，纯靠肉眼排查。
为什么 white-space: nowrap 是刚需，而不是 break-spaces 或 pre
white-space: nowrap 的作用是「让空格不换行、让文本无视容器边界持续延展」，这是单行截断的前提。其他值都不满足：
-
white-space: normal（默认）：自动换行，text-overflow永远不触发 -
white-space: pre：保留换行符和空格，但遇到容器边界仍会换行（除非内容本身没换行符） -
white-space: break-spaces：空格可换行，也不符合“单行”要求
简单说：nowrap 是唯一能确保“无论内容多长，都先撑成一行”的值。别试图用 display: inline-block 或 flex 替代它——那些影响布局，不解决换行逻辑。
移动端或 Flex 容器里 text-overflow 失效怎么办
在 display: flex 子项中，text-overflow 经常不工作，典型表现是文字直接撑宽容器、省略号消失。这是因为 Flex 项默认 min-width: auto，会阻止收缩。
- 给文本容器加
min-width: 0（或min-width: fit-content），允许它被压缩 - 确保父容器是
display: flex且子项未设置flex: none或固定width - 避免对文本元素设
flex: 1后又不配min-width: 0—— 这等于“既要伸缩又要截断”，浏览器优先保伸缩
另外，iOS Safari 旧版本（text-overflow 在 inline-flex 内支持不稳定，如需兼容，改用 display: flex + min-width: 0 更稳妥。
想截断两行或更多行？text-overflow 不行，得换方案
text-overflow: ellipsis 只支持单行。想实现多行省略，不能靠它：
- CSS 方案：用
-webkit-line-clamp（仅 WebKit 内核，Chrome/Safari 支持，Firefox 不支持） - JS 方案：计算字符数或像素高度后手动截断+加
…，适合动态内容或强兼容需求 - 服务端截断：提前按字数处理，最稳定但缺乏响应性
别在 line-clamp 上加 text-overflow 试图“增强效果”——它俩无关，加了也没用。真正要注意的是：line-clamp 要求同时设置 display: -webkit-box、-webkit-box-orient: vertical 和 overflow: hidden，漏一个就回退到全量显示。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
