如何通过CSS给Bootstrap的文字（Text）添加多行省略效果？-css教程-PHP中文网

text-truncate加了不显示省略号，根本原因是它仅支持单行截断，依赖white-space:nowrap锁死换行；多行必须用-webkit-line-clamp方案，且需满足display:-webkit-box、-webkit-box-orient:vertical、-webkit-line-clamp:n和overflow:hidden四条件，缺一不可。

如何通过css给bootstrap的文字（text）添加多行省略效果？

text-truncate 为什么加了也不显示省略号

根本不是类写错了，而是它压根不支持多行——text-truncate只是 overflow: hidden + text-overflow: ellipsis + white-space: nowrap 的快捷封装，而 white-space: nowrap 直接锁死换行。所以哪怕你给 <p></p> 加了 text-truncate，只要内容自然换行，省略号就永远不会出现。

常见失效场景包括：

元素没设 max-width 或父容器宽度不明确（比如只写 col 没写 col-6）
放在 display: flex 子项里，但没加 min-w-0，导致内容撑开、截断逻辑跳过
用在 <td> 上——默认 <code>display: table-cell，text-overflow 不生效
直接套在 <span></span> 上——span 是 inline 元素，得先加 d-inline-block 或改用 <div> <h3>-webkit-line-clamp 实现两行省略的硬性条件</h3> <p>想截两行并显示省略号，必须用 <code>-webkit-line-clamp，但它不是“加个类就完事”的方案，缺一不可：
- display: -webkit-box（不能是 flex 或 block）
- -webkit-box-orient: vertical
- -webkit-line-clamp: 2（整数，表示最多显示行数）
- overflow: hidden（必须显式写，和 text-truncate 冲突，别混用）
- max-height 建议配合行高估算，例如 max-height: calc(1.2em * 2 + 0.4em)，防半行被切
示例 CSS 类：
```
.text-ellipsis-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  max-height: calc(1.2em * 2 + 0.4em);
}
```
Flex 布局下多行截断为何常失效

Flex 子项默认 min-width: auto，文字会强行撑宽容器，导致视觉溢出但 DOM 计算未超限，-webkit-line-clamp 根本不触发。

VPS Bootstrap
从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

解决方法只有两个有效路径：
- 给目标元素加 min-w-0（Bootstrap ≥5.3）+ flex-shrink-1，再叠加自定义省略类
- 或写成 flex: 1; min-width: 0;，确保它能收缩
验证是否生效：打开 DevTools → Computed → 查 min-width 是否为 0px，再看 scrollWidth > width 是否成立。否则 title 属性也不会弹出——不是 JS 问题，是浏览器判定“没真正溢出”。

Firefox 兼容性与 JS 回退的关键判断点

-webkit-line-clamp 在 Chrome/Safari/Edge 16+ 稳定可用，但 Firefox 全版本不支持（截至 2026 年 7 月）。纯 CSS 方案无法跨浏览器。

JS 回退不能靠字数切分——中英文混排、emoji、全角空格会让字数 ≠ 渲染宽度。可靠做法是：
- 用 getBoundingClientRect().height 获取当前渲染高度
- 设定合理上限（如 lineHeight * 2.5），超过即截断
- 避免用 offsetHeight（含 border/padding，易误判）
- 逐字符截取 + 测高，找到刚好撑满两行的位置
真正容易被忽略的是：省略号本身是否被用户感知。加 title 属性看似简单，但它只在 scrollWidth > width 成立时才触发——而 Flex 或 Grid 中的宽度计算常有偏差，min-w-0 缺失时，title 就静默失效。