text-overflow: ellipsis 必须配合 white-space: nowrap、overflow: hidden 及明确宽度（如 width 或 max-width）才生效；多行省略推荐 -webkit-line-clamp（WebKit/Blink 有效）或 JS 方案；工具类应语义化命名如 truncate 或 truncate-3；white-space 宜用 nowrap，pre-wrap 与 ellipsis 不兼容。
text-overflow: ellipsis 必须配合哪些 CSS 属性才生效
text-overflow: ellipsis 单独写完全没用，它只负责“画省略号”，不控制换行、不限制宽度、不阻止文本撑开容器。真正起作用的是三者协同：
-
white-space: nowrap：强制单行不换行（适用于单行省略） -
overflow: hidden：隐藏超出部分（否则省略号不会显示） - 必须有明确的宽度限制（
width、max-width、或父容器有约束，比如flex下的flex-basis）
缺任意一个，text-overflow: ellipsis 都不会出现省略效果。
多行文本省略用 -webkit-line-clamp 还是 JavaScript
纯 CSS 多行省略目前只有 -webkit-line-clamp 可靠，但它不是标准属性，仅在 WebKit/Blink 内核（Chrome、Safari、Edge）有效，Firefox 不支持。
.clamp-3 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
注意：display: -webkit-box 会破坏原有 flex 布局语义；若容器已用 display: flex，不能直接叠加 -webkit-box，需额外包装一层元素或改用 JS 方案。
立即学习“前端免费学习笔记（深入）”；
JS 方案（如截断字符串 + 检测高度）更可控，但带来运行时开销和重排风险，适合内容动态频繁更新或需兼容 Firefox 的场景。
工具类命名如何兼顾语义与复用性
常见错误是把工具类写成 ellipsis 这种模糊名，实际使用时无法判断是单行还是多行、是否带宽限制。推荐按行为分层命名：
-
truncate：单行省略（含white-space: nowrap+overflow: hidden+text-overflow: ellipsis） -
truncate-2/truncate-3：对应-webkit-line-clamp: 2等，显式表明行数 - 避免单独用
ellipsis作类名——它不表达布局约束，容易误用
如果项目用 Tailwind，直接用 line-clamp-2 或 truncate 即可，它们内部已封装好依赖属性；自行实现时务必检查生成的 CSS 是否包含全部必要声明。
white-space 值选 nowrap 还是 pre-wrap？
绝大多数省略场景应选 white-space: nowrap，因为它能确保文本不折行、宽度可预测。但要注意副作用：
- 中文/英文连续长串（如 URL、base64）可能溢出容器且不换行，此时需额外加
word-break: break-all或overflow-wrap: break-word -
white-space: pre-wrap保留空格和换行，但允许折行，text-overflow: ellipsis对它无效（因为文本已在容器内折行了） - 若需保留换行符又想控制总行数，只能回到
-webkit-line-clamp或 JS 截断
简单说：要省略，就别用 pre-wrap；要用 pre-wrap，就别指望 ellipsis。
