text-overflow: ellipsis生效需同时满足三个条件：固定宽度（width/max-width）、white-space: nowrap、overflow: hidden；缺一不可。
text-overflow: ellipsis 为什么加了没反应
直接加 text-overflow: ellipsis 没效果，是因为它只对「块级、固定宽度、不换行」的元素生效，三个条件缺一不可。常见错误是只写了这一条，忘了配套限制。
- 必须设置
width或max-width（比如width: 200px） - 必须设
white-space: nowrap，否则文字会自动折行，根本不会溢出 - 必须设
overflow: hidden，否则溢出部分直接显示出来，省略号没机会出现
三者要一起写，顺序无关，但少一个都不行：
.truncate {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
多行文本怎么加省略号（CSS方案）
CSS 原生不支持多行 text-overflow: ellipsis，但可以用 display: -webkit-box 配合 WebKit 私有属性实现，仅限现代浏览器（Chrome/Safari/Edge），Firefox 不支持。
- 必须用
display: -webkit-box替代display: block - 用
-webkit-line-clamp: 2控制显示行数（注意：这是个数字，不是字符串） - 仍需
overflow: hidden和word-break: break-word或overflow-wrap: break-word处理长单词
示例（两行省略）：
.multi-line {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
word-break: break-word;
}
white-space 的几个关键取值区别
white-space 决定空格、换行符和文字折行行为，和省略号强相关。选错就等于白配。
-
white-space: nowrap：强制单行，忽略换行符，适合单行省略 -
white-space: normal：默认行为，空格合并、自动换行，text-overflow不生效 -
white-space: pre-wrap：保留换行和空格，但允许折行；想保留原文格式又支持省略，得配合 JS 截断或 Flex +min-width: 0防撑开
特别注意：white-space: pre 会完全禁止折行且保留所有空格，容易导致容器被长内容撑宽，反而让 text-overflow 失效。
Flex 容器里文字不省略的典型原因
在 display: flex 的父容器中，子元素默认不收缩（flex-shrink: 1 是默认值，但文字容器常被设成 flex: 0 0 auto），导致宽度不受控，text-overflow 失效。
- 给文字容器加
min-width: 0，强制它参与 flex 缩放（这是最常被漏掉的一点） - 确保它有明确的
width或max-width，不能只靠 flex 分配 - 避免同时设
flex: 1和white-space: nowrap，后者会让内容拒绝压缩，和前者冲突
正确写法示例：
.flex-item {
min-width: 0;
max-width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
实际项目里，最麻烦的不是写不对，而是改着改着发现某个祖先元素加了 white-space: pre 或 overflow: visible，把整条链路都破坏了。查的时候得一层层看 computed style，而不是只盯目标元素。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
