Bootstrap如何让文字在特定断点下自动变为省略号隐藏-Bootstrap教程-PHP中文网

text-truncate不起作用是因为缺少块级显示和明确宽度两个前提；它仅封装overflow:hidden、text-overflow:ellipsis、white-space:nowrap，不设宽也不改display，需手动补足width/max-width及d-block/d-inline-block等。

text-overflow: ellipsis 在 bootstrap 中为什么不起作用？

直接加 text-truncate 类但文字没省略，大概率是因为缺少两个必要前提：元素必须是块级（或 inline-block）且宽度受限。bootstrap 的 text-truncate 本质只是封装了 text-overflow: ellipsis + white-space: nowrap + overflow: hidden，但它不处理宽度——你得自己给容器设宽，否则浏览器不知道“在哪截”。

如何让省略号只在 sm 断点及以上生效？

Bootstrap 5+ 不提供断点敏感的 text-truncate 工具类，得手动组合响应式工具类或写小段 CSS。推荐用内联样式或自定义类，避免污染全局：

用 class="d-none d-sm-inline-block" 配合固定宽容器（如 col-6 或 max-width: 200px），再加 text-truncate

更稳妥的做法是写响应式规则：

@media (min-width: 576px) {
  .truncate-sm {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

注意：不能对 flex 子项直接加 text-truncate，需额外加 min-width: 0（防止 flex 项目不收缩）

多行文本省略（2 行以上）能用 Bootstrap 吗？

不能。text-truncate 只支持单行。多行省略需要 display: -webkit-box 等非标准属性，且 Bootstrap 官方未封装。实操建议：

Bootstrap

Bootstrap 5.3.8 编译版包含可直接用于项目的 CSS、JavaScript 和插件文件，适合快速搭建响应式网页。

下载

用纯 CSS 实现（兼容性够用）：

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

别指望 text-truncate 在 col 或 card-title 里自动生效——这些组件默认是 display: block，但没设宽也没设 max-height，得手动补
如果用 grid 布局，确保父容器有明确 width 或 max-width，否则 -webkit-line-clamp 失效

常见踩坑：响应式下省略号突然消失

典型现象：在 md 屏幕下正常省略，切到 lg 就全显示出来。原因往往是用了 col-lg-auto 这类自适应宽度类，导致容器变宽、不再触发截断。

检查是否误用了 col-* auto 或 w-100 ——它们会让容器撑满，失去截断条件
用 col-lg-6 或 max-width: 300px 显式控宽，比依赖栅格列数更可靠
调试时右键检查元素，确认 computed 样式中 width 和 overflow 是否如预期生效；text-overflow 在 overflow: visible 下完全无效