text-overflow: ellipsis生效需同时满足四个条件：overflow: hidden、white-space: nowrap、明确宽度（width/max-width）、同一元素上设置；缺一不可。
text-overflow: ellipsis 不是“写了就生效”的样式，它必须和 overflow: hidden、white-space: nowrap、明确的宽度（width 或 max-width）一起用，缺一不可。
为什么写了 text-overflow: ellipsis 却没显示省略号？
最常见原因是漏掉了配套约束。浏览器不会主动“检测溢出”，而是按一套固定规则触发截断逻辑：
-
overflow: hidden必须写在**同一元素上**，不是父容器；否则文本照常撑开或换行 -
white-space: nowrap是前提——没有它，text-overflow根本不启动，因为文本先换行了 - 容器不能是
display: inline或未设宽的flex子项；width或max-width得是具体值（如200px、50%），不能是auto或依赖内容撑开 - 如果用了
font-size: 0或line-height: 0等极端缩放，也可能导致视觉上没截断（实际已截，但省略号被压扁/不可见）
多行文本怎么加省略号？-webkit-line-clamp 怎么配才有效
标准 CSS 没有原生多行 text-overflow，-webkit-line-clamp 是目前唯一实用方案，但它对写法极其敏感：
- 必须同时写全这四条：
display: -webkit-box、-webkit-box-orient: vertical、-webkit-line-clamp: N、overflow: hidden -
text-overflow: ellipsis在这里只是“锦上添花”，不写也能出省略号；但写了更保险，尤其在部分 Safari 版本中 - 容器高度不能靠
height硬卡（容易错位），推荐用max-height+line-height计算（例如line-height: 1.5×2行 ≈max-height: 3em） - 该方案在 Firefox 和旧版 Safari 中完全不生效，需 fallback：服务端截取、JS 动态计算字符数、或直接显示完整文本
flex 布局里 text-overflow 失效？检查 flex-shrink 和 min-width
在 display: flex 容器中，子元素即使写了全套 text-overflow 样式，也常因 flex 自动收缩而失效：
- 默认
flex-shrink: 1会让文本容器被压缩到最小宽度，根本没机会“溢出” - 解决方法：给目标文本元素加
flex-shrink: 0，并显式设置min-width: 0（某些 Chrome/Firefox 版本下，不设min-width: 0仍会忽略flex-shrink: 0） - 更稳做法是套一层内联
div：外层负责 flex 排列，内层只管overflow+text-overflow，互不干扰 - 如果文本旁还有图标或按钮，记得给它们也设
flex-shrink: 0，否则它们可能被挤变形，反而影响文本容器宽度
真正麻烦的不是语法记不住，而是不同场景下约束条件互相打架：flex 布局要 flex-shrink: 0，但表格单元格又不能乱加；-webkit-line-clamp 在 iOS 上表现稳定，但在桌面版 Firefox 里直接空白。上线前至少得在 Chrome、Safari、Firefox 三端点开开发者工具，手动调窄容器宽度，看省略号是不是真出现、位置准不准、标点有没有被切半。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
