是的，text-overflow: ellipsis 默认只对单行生效；需同时设置 white-space: nowrap、overflow: hidden 和该属性才起作用，多行需用 -webkit-box 与 -webkit-line-clamp 配合。
text-overflow: ellipsis 只对单行生效？
是的，text-overflow: ellipsis 默认只在单行文本中起作用。如果你直接给多行 加这个属性，它不会截断也不会显示省略号——浏览器会直接忽略，文字照常换行撑开容器。
真正起效需要同时满足三个条件：
-
white-space: nowrap（强制不换行） -
overflow: hidden（隐藏溢出内容） -
text-overflow: ellipsis（指定省略号样式）
三者缺一不可。漏掉 white-space: nowrap 是新手最常踩的坑。
多行文本怎么加省略号？
CSS 原生不支持多行 text-overflow: ellipsis，但可以用 display: -webkit-box 实现兼容性较好的方案（Safari / Chrome / Edge 都支持，Firefox 从 68+ 开始也支持）。
立即学习“前端免费学习笔记（深入）”；
.clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
注意：-webkit-line-clamp 是个“限制行数”的非标准属性，必须配合 display: -webkit-box 和 -webkit-box-orient: vertical 才能生效。单独写没用。
如果项目要支持旧版 Firefox 或 IE，就得用 JS 方案（比如计算字符数 + 截断 + 拼接 "…"），但初级项目通常不用考虑。
为什么加了省略号后文字突然偏上或对不齐？
常见原因是父容器没有设置明确的高度或 line-height，导致 overflow: hidden 切掉的是底部，视觉上像“往上缩”了。
解决方法很简单：
- 给文本容器设一个固定
height（比如height: 40px）或至少设line-height - 确保
font-size和line-height匹配，避免基线错位 - 慎用
vertical-align或flex布局嵌套，容易干扰文本盒定位
尤其当文字和图标并排时，vertical-align: middle 和 line-height 不一致会导致省略号位置飘忽。
中文、英文混排时省略号位置异常？
比如 “这是一段很长的中文介绍…more”，最后的 …more 可能被截成 “…m” 或完全消失——这是因为 text-overflow 截的是渲染后的像素宽度，不是字符数。
更稳妥的做法是：用 max-width 控制容器宽度，而不是依赖内容长度；或者对关键字段做服务端/JS 层级的字数截断（例如限制 30 字 + "…"），再交给 CSS 处理剩余部分。
另外，确保字体加载完成后再应用省略样式，否则 FOUT（Flash of Unstyled Text）可能导致宽度计算错误，临时出现布局抖动。
复杂点在于：省略号本身占空间，而中英文字符宽度不同，ch 单位或 em 宽度估算容易失准。真要精确控制，得测具体字体下的平均字符宽度，初级项目建议先用固定容器宽 + 单行方案兜底。
