.text-truncate仅支持单行截断，因其依赖white-space: nowrap；多行截断必须用-webkit-line-clamp，且需同时满足display: -webkit-box、-webkit-box-orient: vertical、-webkit-line-clamp、overflow: hidden四条件。

不能靠 .text-truncate，它只认单行；多行截断必须手动组合 -webkit-line-clamp，且四条规则缺一不可。

为什么 .text-truncate 加在标题上没反应？

它本质是 white-space: nowrap + overflow: hidden + text-overflow: ellipsis 的封装——white-space: nowrap 直接锁死单行逻辑，和多行截断互斥。哪怕你给

或

加了这个类，只要内容换行了，省略号就永远不会出现。

• 浏览器会按 CSS 层叠规则丢弃冲突声明，比如你再加 -webkit-line-clamp: 2，white-space: nowrap 会让文本压成一行，-webkit-line-clamp 失效
• Bootstrap 官方明确不支持多行场景，这不是 bug，是设计边界
• 常见误操作：在响应式 flex 容器里直接套 .text-truncate，结果因父容器未设 min-width: 0 或宽度约束，整个截断链路崩掉

用 -webkit-line-clamp 实现 2 行/3 行精确截断

这是目前唯一能在 Chrome、Safari（17+）、Edge 中稳定显示省略号的原生方案，但必须同时满足四个条件：

• display: -webkit-box —— 启用 WebKit 盒模型（不能用 flex 或 block）
• -webkit-box-orient: vertical —— 告诉盒子垂直堆叠子行
• -webkit-line-clamp: 2（或 3）—— 真正控制行数的开关，值必须为整数
• overflow: hidden —— 隐藏超出部分，否则省略号不触发

示例写法（适用于

或

）：

.title-clamp-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

注意：height 不能设固定值（如 height: 48px），否则可能截断不自然；宽度需由父容器提供约束（比如 max-width: 300px 或 flex 下的 flex-basis）。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

标题在表格 里怎么截断？

表格单元格有特殊渲染逻辑： 默认是 display: table-cell，不响应 -webkit-box，直接加 -webkit-line-clamp 无效。

• 先确保表格用了 table-layout: fixed（否则列宽由内容撑开，截断无从谈起）
• 给 设 width 或 max-width（比如 style="max-width: 180px;"）
• 再叠加 white-space: nowrap + overflow: hidden + text-overflow: ellipsis —— 这是单行方案，也是表格里最可控的做法
• 若坚持要多行，得把 包一层
  ，再对这个

  应用 -webkit-line-clamp 类，否则样式被表格渲染机制吞掉

  Firefox 不支持 -webkit-line-clamp 怎么办？

  它确实不认，且没有等效标准属性。纯 CSS 场景下只有两个务实选择：

  • 接受 Firefox 下显示完整内容（多数业务场景可接受，用户滚动即可看到全貌）
  • 用 line-height × 行数 计算高度 + overflow: hidden 实现“无省略号截断”：比如 line-height: 1.5rem，想卡 2 行就设 height: 3rem，不加 text-overflow，靠视觉裁剪

  真正跨浏览器的多行省略号，目前仍需 JS 辅助（如监听 DOM 渲染后计算行高并手动插入 …），但复杂度陡增，多数项目没必要。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！