text-overflow: ellipsis 默认仅对单行文本生效，需同时设置 overflow: hidden、white-space: nowrap 及明确宽度；多行截断依赖 -webkit-line-clamp 等非标准方案，flex 中需设 flex-shrink: 0 和 min-width: 0 才生效。
text-overflow: ellipsis 只对单行生效？
没错，text-overflow: ellipsis 默认只在单行文本中起作用。它不是“自动检测溢出然后加省略号”的智能样式，而是依赖一组特定的布局约束才能触发。
常见错误现象：div 里写了 text-overflow: ellipsis 却没显示省略号，文字直接换行或撑开容器。
- 必须同时设置
overflow: hidden - 必须设置
white-space: nowrap（禁用换行） - 容器得有明确宽度（
width或max-width），不能是内容自适应的display: inline或未设宽的flex子项
多行文本怎么加省略号？CSS 没原生支持
CSS 标准里至今没有 text-overflow: ellipsis 的多行版本。所谓“-webkit-line-clamp”只是 WebKit 内核的私有属性，不是标准，且行为受限。
使用场景：卡片标题、摘要预览等需要截断 2–3 行的场合。
立即学习“前端免费学习笔记（深入）”；
-
display: -webkit-box+-webkit-line-clamp: 2+overflow: hidden是目前最常用方案 - 必须配合
-webkit-box-orient: vertical，否则不生效 - Firefox 和部分旧版 Safari 不支持
-webkit-line-clamp，需降级处理（比如 JS 截断或服务端截取） - 该方案对
inline元素无效，容器必须是块级或弹性盒子
flex 容器里 text-overflow 失效？检查 flex-shrink
在 display: flex 的父容器中，子元素即使写了 text-overflow: ellipsis，也常因默认 flex-shrink: 1 被压缩而失效——它先缩容器，再考虑溢出。
典型错误现象：文字没被截断，反而把旁边图标挤变形，或整个子项被压窄到看不见。
- 给目标文本元素显式设置
flex-shrink: 0，防止它被压缩 - 同时确保该元素有
min-width: 0（否则flex-shrink在某些浏览器下仍不生效） - 更稳妥的做法是套一层
div，让内层负责overflow和text-overflow，外层控制 flex 布局
中文标点、空格、英文混排时省略号位置不准
text-overflow: ellipsis 总是在“视觉末尾”截断，但浏览器对“字符边界”的判断受 word-break、overflow-wrap 和字体渲染影响，尤其在中英文混排时容易切在标点前或空格后，显得突兀。
性能影响不大，但体验差：比如 “详情…”，实际显示成 “详…” 或 “详情 …”（空格被保留）。
- 优先用
overflow-wrap: break-word替代word-break: break-all，后者会强行断英文单词 - 避免在文本末尾留空格或全角标点；服务端或 JS 渲染前 trim 一下更可靠
- 如果对精度要求高（如金融、法律类摘要），不要依赖纯 CSS 截断，改用 JS 计算字符像素宽度后手动截断 + 添加
…
