单行截断用text-truncate，但需补充宽度和块级显示；多行截断必须用-webkit-line-clamp四条件（display:-webkit-box、-webkit-box-orient:vertical、-webkit-line-clamp、overflow:hidden），缺一不可。
单行截断用 text-truncate，但必须手动补宽度和显示类型；多行截断不能用它，得靠 -webkit-line-clamp 四件套，缺一不可。
为什么 text-truncate 加了没反应
它只是三个声明的快捷组合：overflow: hidden、text-overflow: ellipsis、white-space: nowrap，不设宽、不改 display，浏览器根本不知道“在哪截”。
- 元素必须是块级或
inline-block（比如加d-block或d-inline-block） - 容器要有明确宽度约束：
max-width、width，或在 flex 容器中配min-width: 0 - 别在
col上直接加——col默认是 flex 子项，不加max-width就会撑开 - 表格里用要额外设
table-layout: fixed和列宽，否则宽度由内容决定
怎样让多行文本（比如 2 行）也显示省略号
text-truncate 天然不支持多行，因为 white-space: nowrap 和换行逻辑冲突。唯一稳定方案是 -webkit-line-clamp，但它不是“加个类就行”，必须同时满足四个条件：
-
display: -webkit-box（不能用flex或block替代） -webkit-box-orient: vertical-
-webkit-line-clamp: 2（整数，表示最多几行） -
overflow: hidden（漏掉这个，省略号绝对不出现）
另外，建议加 max-height: calc(1.2em * 2 + 0.4em) 辅助控制视觉高度，避免第二行被硬裁一半。
响应式场景下省略号突然失效怎么办
典型现象：sm 断点下正常，lg 下全显示出来。本质是容器宽度变了，不再触发溢出逻辑。
- 避免用
col-lg-auto或col-md（无数字），它们会让列宽随内容伸缩 - 优先用带数字的栅格类 + 显式
max-width，例如col-md-6 max-w-300 - 需要断点敏感控制时，写媒体查询覆盖：
@media (min-width: 768px) { .truncate-on-md { max-width: 200px; } } - 检查父级
row是否加了g-0——间隙归零可能意外缩小可用宽度，导致提前截断
Firefox 或旧 WebView 中怎么兜底
-webkit-line-clamp 在 Firefox、部分安卓 WebView、IE 中完全不生效，CSS 方案此时彻底失效。
JS 回退不能简单按字符数切，因为中英文、标点、字体宽度不同，同样字数渲染高度可能差一行。可靠做法是：
- 把文本逐字符插入临时
span，测offsetHeight是否超过两行目标高度 - 监听
resize事件，窗口大小变化后重新计算 - 注意
line-height、font-size、letter-spacing都会影响“两行”的像素定义，不能硬编码固定值
真正麻烦的不是写法，而是“两行”本身没有统一像素定义——稍有样式变动，截断位置就偏移。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
