text-overflow: ellipsis 仅对单行有效，因其依赖 white-space: nowrap，与多行换行逻辑冲突；多行省略必须用 -webkit-line-clamp 配合 display: -webkit-box、-webkit-box-orient: vertical、overflow: hidden 及盒模型高度约束。
只能用 -webkit-line-clamp 配合盒模型约束，别指望 text-overflow: ellipsis 单独生效。
为什么 text-overflow: ellipsis 对多行无效
这个属性设计上就只作用于「单行块容器」：它依赖 white-space: nowrap 强制不换行，而多行场景必须允许换行，两者逻辑冲突。浏览器遇到多行 + text-overflow: ellipsis 时，要么忽略省略号，要么只在最后一行末尾加，但不会截断整段文本。
常见错误现象：
- 写了
text-overflow: ellipsis却没效果，甚至文本撑破容器 - 加了
white-space: normal后省略号彻底消失 - 在 Firefox 或 IE 中完全不显示省略号（连单行都可能异常）
-webkit-line-clamp 必须配齐的四个属性
缺一不可，漏掉任意一个都会导致失效：
立即学习“前端免费学习笔记（深入）”；
-
display: -webkit-box：启用旧版弹性盒，这是-webkit-line-clamp的运行基础 -
-webkit-box-orient: vertical：告诉浏览器子内容按垂直方向堆叠（即“按行”理解） -
-webkit-line-clamp: N：指定最多显示 N 行，超出部分被截断 -
overflow: hidden：隐藏被截掉的内容，否则可能溢出或留白
示例：
.desc {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
注意：-webkit- 前缀不能省，现代 Chrome/Firefox/Edge（Chromium 内核）都认，但纯 Firefox（Gecko）需 68+ 才支持该前缀属性。
盒模型约束不到位，-webkit-line-clamp 就是摆设
这个属性不是“智能计算行高”，它只按容器当前渲染高度粗略截断。所以必须手动控制高度边界：
- 不能设
height: auto或不设高度；推荐用max-height，值 ≈line-height × N（比如line-height: 1.5、字体 14px、要 3 行 →max-height: 63px） - 避免父级用
float、position: absolute或display: flex直接包裹目标元素——这些会让子元素脱离正常流，-webkit-line-clamp失效 - 如果父容器是 flex 项，加一层
divwrapper 并设为display: block，再把样式写在 wrapper 上 - 字体大小和
line-height必须稳定；动态字号、CSS 变量未计算完成时，可能导致行数偏差
IE 和旧 Android Webview 怎么办
IE 完全不支持 -webkit-line-clamp，旧版 Android Webview（≤4.4）也基本失效。兜底方案只有两个现实选择：
- 服务端预截断：后端按字数或字符数截取（如 UTF-8 下中文 2 字节/字），前端只负责展示，适合评论摘要、商品标题等结构化内容
- JS 精准截断：用
getClientRects()或反复二分插入…测高度，但要注意重排开销，且无障碍阅读器可能读不到省略部分
别用伪元素渐变遮罩（::after + linear-gradient）方案：它无法判断是否真溢出，文字没超长时也会显示省略号，而且在高缩放比或字体加载延迟时容易错位。
真正难的不是写对那四行 CSS，而是确保它跑在所有预期环境里——尤其是当设计稿要求“最多两行”，而你发现 iOS Safari 某个版本下第三行第一个字还露了半截的时候。
