bootstrap的text-truncate仅支持单行截断，因其依赖white-space:nowrap，与多行截断所需的-webkit-line-clamp冲突；实现多行需用display:-webkit-box、-webkit-box-orient:vertical、-webkit-line-clamp和overflow:hidden四者缺一不可，且容器须有明确宽度约束。
Bootstrap 本身不支持多行省略，text-truncate 只能用于单行；要实现两行或更多行截断，必须绕开它，用 -webkit-line-clamp 组合 CSS 属性手动实现。
为什么 text-truncate 对多行完全无效
text-truncate 的底层是 white-space: nowrap + overflow: hidden + text-overflow: ellipsis。其中 white-space: nowrap 强制文本不换行，直接锁死为单行逻辑。哪怕你后续加 -webkit-line-clamp: 2，浏览器会因属性冲突而丢弃或忽略部分声明，结果要么没省略号，要么只显示一行。
常见错误现象：
- 给
<p></p>加了text-truncate和自定义多行类，但省略号始终不出现 - 响应式切换时，
text-truncate在某些断点下“突然失效”——其实是容器变宽后不再触发溢出
-webkit-line-clamp 必须满足的四个条件
这是目前在 Chrome、Safari、Edge 中稳定生效的唯一原生方案，但缺一不可：
-
display: -webkit-box：启用 WebKit 盒模型（不能用flex或block替代） -
-webkit-box-orient: vertical：指定子内容垂直堆叠 -
-webkit-line-clamp: 2（或你要的整数）：真正控制最大显示行数 -
overflow: hidden：隐藏超出部分，否则省略号不会渲染
示例写法：
.line-clamp-2 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
注意：text-overflow: ellipsis 对多行无效，可加可不加；但 overflow: hidden 绝对不能漏。
容易被忽略的宽度与布局约束
即使 CSS 写全了，-webkit-line-clamp 仍可能“静默失效”，原因几乎都出在容器尺寸上：
- 父容器必须有明确的
width或max-width，否则无法计算“几行算溢出” - 在 Bootstrap
grid布局中，避免用col-lg-auto这类自适应类——它会让容器宽度随内容伸缩，导致截断失效 - 在
dropdown-item或card-title里使用时，父级组件常带默认padding或display覆盖，需检查 computed styles - 若父容器是
flex，子元素需加min-width: 0防止 flex item 拒绝收缩
响应式多行截断怎么写
Bootstrap 没提供 text-truncate-sm 这类断点专属类，得靠媒体查询手动控制行数：
.text-2lines {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
@media (max-width: 768px) {
.text-2lines {
-webkit-line-clamp: 1;
}
}
关键点：
- 不要指望
col-12 col-md-6 col-lg-4自动触发截断——它只是缩窄容器，是否截断仍取决于内容长度和字体渲染 - 别用
clamp()函数替代，它和文本截断无关，只是数值计算工具 - Firefox 不支持
-webkit-line-clamp，若需强兼容，只能降级为 JS 方案（如监听scrollWidth > offsetWidth）或服务端截断
最常被跳过的一步：忘了给容器设 max-width 或确认父容器是否真有宽度约束。没有这个前提，其他所有 CSS 都白写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
