纯CSS多行截断最简方案是display: -webkit-box配合-webkit-line-clamp和-webkit-box-orient: vertical三者缺一不可；text-overflow: ellipsis仅适用于单行；Firefox不支持该方案，需JS或伪元素降级。
多行文本截断用 display: -webkit-box 最直接
纯 CSS 实现多行截断，display: -webkit-box 是目前兼容性好、写法最简的方案，适用于 Chrome、Safari、Edge（Chromium 内核）及大部分安卓 WebView。它不依赖 JS，也不需要绝对定位或伪元素遮罩，适合响应式布局中动态内容的截断。
关键点在于三件套必须同时存在：display: -webkit-box、-webkit-line-clamp、-webkit-box-orient: vertical。缺一不可，否则无效。
-
-webkit-line-clamp设为2表示最多显示 2 行，超出部分省略；设为3就是 3 行 - 必须设置
height或max-height，否则在部分 iOS 版本中可能不触发截断 - 父容器需有明确宽度（如
width或max-width），否则-webkit-line-clamp在 flex 容器中可能失效 - 不支持 Firefox（至今无原生等效属性），如需全浏览器覆盖，得 fallback 到 JS 方案
text-overflow: ellipsis 只对单行有效
很多人误以为 text-overflow: ellipsis 能管多行——其实它只作用于**单行块级元素**，且必须配合 white-space: nowrap 和 overflow: hidden 才生效。一旦换行，这个组合就完全失效。
常见错误写法：white-space: normal; text-overflow: ellipsis; —— 这不会产生省略号，浏览器直接忽略 text-overflow。
立即学习“前端免费学习笔记（深入）”；
- 单行截断标准写法：
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - 多行场景下硬套这套，只会让文字撑开容器或溢出，不会截断
- 若容器是
flex且子项未设min-width: 0，即使写了overflow: hidden，也可能因 flex 项目的默认最小尺寸导致截断失败
Firefox 下多行截断只能靠 JS 或伪元素模拟
Firefox 不支持 -webkit-line-clamp，也没有对应的标准 CSS 属性。目前稳定可用的方案只有两种：JS 动态计算 + 截字符串，或用 ::after 伪元素盖住末尾并加省略号（但语义弱、换行错位风险高）。
JS 方案推荐用 element.scrollHeight > element.clientHeight 判断是否溢出，再逐字/逐词裁剪，比单纯按字符数截取更准确：
function clampText(el, lineCount = 2) {
const lineHeight = parseInt(getComputedStyle(el).lineHeight);
const maxHeight = lineHeight * lineCount;
if (el.scrollHeight > maxHeight) {
let text = el.textContent;
while (el.scrollHeight > maxHeight && text.length > 0) {
text = text.slice(0, -1);
el.textContent = text + '…';
}
}
}- 注意：频繁调用需防重排（
reflow），建议节流或只在内容加载后执行一次 - 伪元素方案需固定行高、禁用
word-break，且对中英文混排、emoji、富文本支持差 - 服务端提前截断（如 API 返回摘要字段）是最稳妥的兜底方式，避免前端计算负担
Flex / Grid 容器中多行截断容易失效
当文本包裹在 display: flex 或 display: grid 的子项里时，-webkit-box 截断常被“撑开”——根本原因是 flex item 默认 min-width: auto，会阻止内容收缩，导致 overflow: hidden 失效。
- 修复方法：给文本容器显式添加
min-width: 0（flex）或min-width: 0; min-height: 0（grid） - 如果父容器用了
flex: 1，子文本容器又没设宽，-webkit-line-clamp可能压根不触发 - 嵌套多层 flex 时，每一层都可能影响文本容器的可用宽度，建议用浏览器 devtools 的 layout 面板检查 computed
width是否为预期值
实际项目里最麻烦的不是写法本身，而是不同容器嵌套 + 浏览器差异 + 动态内容长度带来的组合问题。别迷信“一套 CSS 走天下”，先确认目标环境（比如是否要支持 Firefox），再决定用纯 CSS 还是加 JS 保底。
