text-overflow: ellipsis 仅对块级元素生效，需同时满足 width/max-width、white-space: nowrap 和 overflow: hidden；bootstrap 5 的 text-truncate 类缺宽度设置，flex 子项还需 min-width: 0 和 flex-shrink-1。

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

直接给 <div> 或 <code><p></p> 加 text-overflow: ellipsis 没反应，是因为它必须配合两个前提条件：固定宽度（width 或 max-width）和强制单行（white-space: nowrap），且容器需是块级并设置 overflow: hidden。

Bootstrap 5 默认没封装这个组合样式，所以不能只靠 text-truncate 类就搞定所有场景。

• text-truncate 类只包含 overflow: hidden、text-overflow: ellipsis 和 white-space: nowrap，但**不设宽度**——你得自己加 width 或用响应式类如 w-100、max-w-25
• 用在 Flex 容器子项时，要额外加 min-width: 0（防止内容撑开），否则省略号失效
• 表格单元格（<td>）默认是 <code>table-cell 显示模式，text-truncate 无效，得先改成 display: block 或用 text-truncate + table-cell 的变通写法

  Bootstrap 5 的 text-truncate 类怎么用才稳

  这个类本身没问题，但容易因父容器行为“失灵”。最常见的是用在 <div class="d-flex"> 里的一段文字，看着写了 <code>text-truncate，结果还是换行或溢出。

  • Flex 子项必须加 flex-shrink: 1（Bootstrap 对应类是 flex-shrink-1）+ min-width: 0（Bootstrap 没现成类，得手写或自定义）
  • 如果父容器是 col 或 col-md-6，确保该列有明确宽度（比如用了 col-8），否则 text-truncate 会因宽度不定而放弃截断
  • 避免套在 <span></span> 上——span 是行内元素，text-overflow 不起作用；要么改用 <div>，要么加 <code>style="display: inline-block"

    多行文本截断（2行/3行）没法靠 Bootstrap 原生类解决

    Bootstrap 官方不提供 line-clamp 支持，text-truncate 仅限单行。想截两行？得手动写 CSS，而且要注意兼容性。

    

    VPS Bootstrap

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

    下载
    • 现代方案用 display: -webkit-box + -webkit-line-clamp: 2，但 Firefox 和部分旧版 Chrome 不支持
    • 不能和 text-truncate 混用——两者机制冲突，后者会覆盖前者所需的 overflow 设置
    • 若需服务端 fallback（比如 SSR 渲染时 JS 还没加载），建议优先用后端截断 + 添加省略号，CSS 截断只是增强体验

    中文标点、全角空格导致省略号位置异常

    截断后出现“…”卡在句号前、或者空格后多一格，不是样式问题，是浏览器对 Unicode 字符宽度和换行点的判断差异。

    • 全角空格（　）、中文顿号（、）、书名号（《》）可能被当作“可换行点”，导致 white-space: nowrap 失效
    • 避免在截断区域内混用中英文标点；必要时用零宽空格（​）或 word-break: keep-all 强制不断行
    • 测试时别只看 Chrome —— Safari 对 text-overflow 的字符计数更严格，同一段文字在 Safari 可能少显示一个字
    事情说清了就结束。真正麻烦的从来不是加个类，而是那个没显式声明的 width，还有 Flex 下悄悄撑开的 min-width。