text-overflow: ellipsis 默认仅单行生效，因需 white-space: nowrap、overflow: hidden 和固定宽度三者共存；多行需用 -webkit-line-clamp 配合 display: -webkit-box 等条件实现，Firefox/旧Edge需降级处理。
为什么 text-overflow: ellipsis 默认只对单行生效
因为 text-overflow 的规范行为依赖于块级容器处于「单行文本流」状态：必须同时满足 white-space: nowrap、overflow: hidden 和固定宽度。一旦换行，这个机制就失效了——浏览器根本不会去“截断”多行内容，更不会自动加省略号。
用 -webkit-line-clamp 实现三行省略（最常用方案）
这是目前兼容性足够好（Chrome 6+、Safari 7+、Edge 16+）、写法最简洁的多行截断方案，但它是 WebKit 内核私有属性，需配合特定 display 值使用。
关键点：
- 父容器必须设为
display: -webkit-box（不能用flex或block） - 必须声明
-webkit-box-orient: vertical -
-webkit-line-clamp设定行数（如3），它只在-webkit-box下生效 - 仍需
overflow: hidden，否则超出部分会溢出显示
示例：
立即学习“前端免费学习笔记（深入）”；
.summary {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.5;
}注意：line-height 影响实际截断位置——如果设为 1.5，三行高度 ≈ 4.5em，但最后一行文字可能被粗暴裁切。建议搭配 margin-bottom: 0 避免段落间距干扰高度计算。
Firefox 和旧版 Edge 不支持 -webkit-line-clamp 怎么办
Firefox 直到 119 才开始实验性支持 -webkit-line-clamp（需启用 layout.css.line-clamp.enabled），旧版 Edge（≤15）完全不支持。此时只能降级处理：
- 服务端截断：按字符数或字数预生成摘要（最稳定，但失去响应式适应能力）
- JS 补充方案：用
element.scrollHeight > element.clientHeight判断是否溢出，再用textContent逐步截断 + 加"…"（注意避免重复触发重排） - 纯 CSS 回退：对不支持的浏览器，用
max-height+overflow: hidden隐藏多余内容，不显示省略号（视觉上可接受）
例如：
.summary {
max-height: 4.5em; /* ≈ 3 × line-height */
overflow: hidden;
}
@supports (-webkit-line-clamp: 3) {
.summary {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
}用 display: -webkit-box 时容易踩的坑
这个 display 值会破坏原有布局流，尤其和 Flex/Grid 混用时问题明显：
- 子元素的
margin会被忽略（-webkit-box不支持子项 margin 合并） - 无法使用
align-items或justify-content，对齐要靠text-align或内联样式 - 如果父容器本身是
flex项，-webkit-box可能导致高度塌陷（需显式设height或min-height） - 中文下若遇到全角标点或 emoji，
-webkit-line-clamp截断位置可能偏移（因字体度量差异）
调试建议：在 DevTools 中临时关闭 display: -webkit-box，观察原始高度，再对比启用后的截断效果；用 outline: 1px solid red 包裹容器，确认是否意外缩容。
多行省略本质是「视觉欺骗」，没有浏览器原生的语义化截断 API。越想兼顾兼容性、响应式和中英文混排，越得提前在内容结构（比如摘要字段长度控制）和 CSS fallback 上留余地。
