text-overflow: ellipsis仅对单行生效，多行需用-webkit-line-clamp配合display: -webkit-box、-webkit-box-orient: vertical和overflow: hidden，且需设置max-height；firefox等不支持该方案，js回退需按高度判断截断。
text-overflow: ellipsis 只对单行生效，多行要用 -webkit-line-clamp
原生 css 的 text-overflow: ellipsis 默认只在单行文本上起作用，直接套在多行容器上没反应——这是最常卡住的地方。要截断两行并显示省略号，得靠 webkit 内核的私有属性 -webkit-line-clamp，配合 display: -webkit-box 布局。
实操要点：
- 必须同时设置
display: -webkit-box、-webkit-box-orient: vertical和-webkit-line-clamp: 2 - 容器需有明确高度或最大高度（比如
max-height: 48px），否则-webkit-line-clamp可能不触发 -
overflow: hidden不可少，否则超出部分会溢出显示 - Firefox 和旧版 Edge 不支持
-webkit-line-clamp，纯 CSS 方案无跨浏览器解
Bootstrap 5 中怎么写才不和 utility class 冲突
Bootstrap 5 的 text-truncate 类只处理单行，硬加在多行元素上无效。别试图用 text-truncate + h-50 混搭——它不会自动适配行数，反而可能因高度计算不准导致文字被裁掉一半。
推荐做法是自定义 class，避免覆盖 Bootstrap 的响应式规则：
- 在 SCSS 中定义：
.text-ellipsis-2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; max-height: calc(1.2em * 2 + 0.4em); /* 行高 × 行数 + 行间距估算 */ } - 不要用
!important强行覆盖 Bootstrap 的height或overflow工具类 - 如果用的是 Bootstrap CDN（非源码编译），直接在 HTML 里加 style 属性也行，但注意内联样式优先级高，容易后续难维护
JavaScript 回退方案：当 -webkit-line-clamp 不可用时
遇到 Firefox 或某些 WebView 场景，CSS 截断失效，就得用 JS 补位。核心思路是：按字符逐个截取、测高、找到刚好撑满两行的位置。
简单可靠的判断逻辑：
- 先用
getBoundingClientRect().height获取容器当前渲染高度 - 设定一个合理上限（如
lineHeight * 2.5），超过就截断 - 避免用
offsetHeight，它包含 border/padding，容易误判 - 慎用正则“按字数切”，中英文混排、全角半角、emoji 都会让字数 ≠ 渲染宽度
- 示例关键判断：
if (el.scrollHeight > el.clientHeight * 1.8) { /* 触发截断逻辑 */ }
为什么用 display: -webkit-box 而不是 flex
-webkit-line-clamp 依赖 -webkit-box 的旧盒模型，换成 display: flex 就完全失效——这不是兼容性问题，是机制限制。Flexbox 没有“行数控制”概念，-webkit-line-clamp 根本不识别它。
常见误解：
- 以为加了
flex-direction: column就能配合-webkit-line-clamp——不行 - 试图用
line-clamp配合 Grid 布局——目前所有浏览器都不支持 - 在 Bootstrap 5 的
d-flex容器里直接套-webkit-line-clamp——会因 display 冲突而静默失败
真正能用的组合只有 display: -webkit-box + -webkit-box-orient: vertical + -webkit-line-clamp。别绕弯子，这个链路目前没有替代品。
