text-overflow: ellipsis仅支持单行省略；多行需用-webkit-line-clamp（需display:-webkit-box等配合）、::after伪元素遮罩或JavaScript精确截断，各有兼容性与精度权衡。
text-overflow: ellipsis 只对单行生效，多行要用 JavaScript 或 -webkit-line-clamp
纯 CSS 实现多行文本省略号，text-overflow: ellipsis 本身不支持 —— 它只在单行、white-space: nowrap 和 overflow: hidden 同时满足时才起作用。想截两行或三行并加省略号，得换思路。
最轻量的方案是用 -webkit-line-clamp（Chrome/Safari/Edge 均支持，Firefox 从 129+ 开始支持）：
div {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* 截 2 行 */
overflow: hidden;
}- 必须配合
display: -webkit-box和-webkit-box-orient: vertical，缺一不可 -
-webkit-line-clamp是行数控制，不是字符数，响应式下可能因字号缩放导致实际截断位置偏移 - Firefox 旧版本完全不识别，若需兼容，得 fallback 到 JS 截取字符串 +
textContent拼接
::after 伪元素加省略号，本质是“视觉覆盖”，不是真截断
用 ::after 在容器右下角盖一个省略号，看似灵活，实则绕开了文本布局逻辑 —— 它不改变原文本流，也不触发截断计算，只是“假装有省略”。容易误以为内容被裁剪了，其实 DOM 里全在。
典型写法：
立即学习“前端免费学习笔记（深入）”；
div {
position: relative;
max-height: 3.6em; /* 1.8em × 2 行 */
overflow: hidden;
}
div::after {
content: "...";
position: absolute;
bottom: 0;
right: 0;
background: white; /* 需遮住部分文字，常要同背景色 */
padding-left: 4px;
}-
max-height必须精确匹配行高 × 行数，否则省略号会悬空或压字 - 若父容器字体大小动态变化（如 rem/vw），
max-height得同步响应，否则错位 -
::after的background不是万能解：深色背景上得用透明渐变遮罩，否则边缘生硬
用 JavaScript 精确截断时，别直接切字数
按字符长度截取（比如 str.substring(0, 50) + "..."）在中英文混排、emoji、全角标点场景下极易崩 —— “50 个字符”可能只显示半句话，甚至把 emoji 切成乱码。
- 优先用
element.scrollHeight > element.clientHeight判断是否溢出，再逐字/逐词回退测试 - 推荐用
getClientRects()获取每行渲染范围，定位最后一行末尾位置，再反推可容纳多少文本节点 - 避免在
resize回调里高频重算；加节流，或监听ResizeObserver - 服务端预截断（如 API 返回
summary字段）比前端 JS 更稳，尤其列表页大量卡片时
line-height 和 font-size 不一致时，-webkit-line-clamp 渲染会偏移
-webkit-line-clamp 的行高计算依赖 line-height，但若元素内嵌了不同 font-size 或 vertical-align 的子标签（比如 <sup> 或图标 <span>），浏览器可能把整行高度算高，导致提前截断或留白过多。
- 检查是否用了
line-height: normal—— 它在不同字体下表现不一致，建议显式设为数值（如line-height: 1.5） - 子元素若含
margin/padding，也会撑开实际行高，但-webkit-line-clamp不感知这些 - 真要混排复杂内联元素，不如放弃 CSS 截断，改用固定高度 +
overflow: hidden+::after盖省略号，再用 JS 校准位置
多行省略的核心矛盾在于：CSS 擅长布局，不擅长语义截断；JS 能精准控制，但成本高。选哪条路，取决于你能不能接受“近似正确”和“运行时开销”的权衡 —— 尤其当容器宽高不确定、字体加载异步、或需要无障碍读屏支持时，很多看似简单的省略号，背后全是边界条件。
