如何在Bootstrap中实现文字超出部分显示省略号-Bootstrap教程-PHP中文网

text-overflow: ellipsis 仅对块级元素生效，需配合 overflow: hidden、white-space: nowrap 及固定宽度；bootstrap 5 的 text-truncate 封装该组合但仅支持单行；多行省略需 -webkit-line-clamp（webkit 专用）或 js 方案；flex 子项中须加 min-width: 0 才能生效。

如何在bootstrap中实现文字超出部分显示省略号

text-overflow: ellipsis 只对块级元素生效

直接给 <span></span> 或 <a></a> 加 text-overflow: ellipsis 不会生效，因为 CSS 要求该属性必须配合 overflow: hidden、white-space: nowrap 且元素需有**固定宽度**（或受父容器约束的明确宽度）。Bootstrap 的文本类（如 text-truncate）正是封装了这一组合。

用 Bootstrap 5 的 `text-truncate` 最省事

Bootstrap 5 内置了 text-truncate 工具类，它等价于：overflow: hidden + text-overflow: ellipsis + white-space: nowrap。但注意：它只作用于单行截断。

VPS Bootstrap

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

下载

必须加在有明确宽度的容器上（比如 width: 200px、max-width: 100% 或响应式栅格列中）
不能单独用于 <div> 如果它默认是 <code>display: block 但父容器没设宽，依然无效
多行省略需另寻方案，text-truncate 不支持

<div class="col-4">
  <p class="text-truncate" style="max-width: 150px;">这是一段特别长的文字，超出部分应该显示省略号</p>
</div>

多行文字省略不能靠 `text-truncate`

想实现 2 行或 3 行后加省略号？CSS 原生没有可靠跨浏览器的多行 text-overflow。常见做法是用 display: -webkit-box + -webkit-line-clamp，但它仅在 WebKit 内核（Chrome/Safari）有效，Firefox 不支持。

Bootstrap 本身不提供多行截断工具类
若需兼容 Firefox，得用 JS 方案（如监听容器尺寸、截断字符串并补 "…"）
用 -webkit-line-clamp 时，必须同时设 display: -webkit-box 和 -webkit-box-orient: vertical

<p class="line-clamp-2">多行文字…</p>

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