text-overflow: ellipsis 不能实现多行截断，因其依赖 white-space: nowrap，与多行冲突；-webkit-line-clamp 是唯一纯 CSS 多行省略方案，需同时设置 display: -webkit-box、-webkit-box-orient: vertical、-webkit-line-clamp 和 overflow: hidden。
text-overflow: ellipsis不能直接实现多行文本截断——这是个常见误解，强行加在多行元素上，省略号根本不会出现。
为什么 text-overflow: ellipsis 在多行里完全不生效
它依赖三个硬性前提同时成立：white-space: nowrap、overflow: hidden、有明确的 width 或 max-width。而 white-space: nowrap 会禁止换行，天然与“多行”冲突。浏览器检测到矛盾，就静默忽略 text-overflow 声明，也不报错。
-webkit-line-clamp 是当前唯一纯 CSS 多行省略方案
它不依赖 text-overflow，而是通过盒模型截断逻辑实现，但必须严格配齐四个声明：
-
display: -webkit-box—— 必须用这个 display 值，flex或block都不行 -
-webkit-box-orient: vertical—— 缺少这句，-webkit-line-clamp彻底失效 -
-webkit-line-clamp: N—— 行数写整数，不支持小数或 calc() -
overflow: hidden—— 不是可选，是强制要求；仅设text-overflow: ellipsis没用
示例（三行省略）：
.clamp-3 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
注意：text-overflow: ellipsis 可以加上，但它在这里只是“锦上添花”，真正起作用的是前四条；Firefox 125+ 才开始支持该属性，旧版 Firefox 和 IE 完全无效。
无省略号的多行截断：用 line-height × 行数 + overflow: hidden
当设计稿明确不要“…”时，这是更可靠的选择，兼容所有浏览器（包括 IE11）：
-
line-height必须是固定值，比如1.4em或20px；normal或百分比会导致高度计算失准 -
max-height=line-height× 行数，例如max-height: 3.6em（3 行 × 1.2em） - 必须设
overflow: hidden，否则高度限制形同虚设 - 避免设
height，它会挤压/拉伸行高，破坏对齐
这种方案不显示省略号，但裁剪干净、行为确定，适合卡片列表、摘要预览等场景。
响应式与中英文混排的坑
用 -webkit-line-clamp 时，行高受字体影响明显：
- 中英文混排下，某些字体（如思源黑体 + 英文 Times New Roman）会导致实际行高浮动，
-webkit-line-clamp截断位置偏移 - 响应式场景中，若用
rem或em控制font-size，需同步确保line-height也是相对单位且比例稳定 - 不要指望
@supports (-webkit-line-clamp: 1)能完美降级——它在 Safari 中返回 true，但在部分旧版 Safari 中仍不工作
最易被忽略的一点：所有方案都要求容器有明确宽度（width 或 max-width），否则换行逻辑失控，截断失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
