如何通过CSS text-overflow属性实现Bootstrap文本溢出自动添加省略号？

本文共计754个文字，预计阅读时间需要4分钟。

直接使用 + text-truncate 类，类行，但必须满足三个条件：

为什么加了 text-truncate 却没省略号？

不是类失效，而是 CSS 触发条件没凑齐。常见错误现象包括：

• 文字照常换行（忘了 white-space: nowrap）
• 容器宽度是 auto 或父容器没约束（比如 flex 子项未设 min-width: 0）
• 元素是 inline 或 inline-block，但没配 display: block 或宽度限制
• 父容器用了 flex，子项默认 flex-shrink: 1 却因内容撑开而拒绝收缩

Bootstrap 的 text-truncate 本质就是这三条声明的封装：overflow: hidden + text-overflow: ellipsis + white-space: nowrap。它只对单行生效，且只在块级上下文中起作用。

text-truncate 在 Flex 布局里为啥经常失灵？

Flex 子项默认会尽量保持内容宽度，即使设置了 text-truncate，也可能因未触发收缩逻辑而溢出。关键解决点是让子项“愿意变窄”：

立即学习“前端免费学习笔记（深入）”；

• 给该子元素加 min-width: 0（最常用、最轻量）
• 或写成 flex: 1; min-width: 0;，再叠加 text-truncate
• 避免父 flex 容器设了 flex-shrink: 0 或 min-width: unset

别指望只靠 text-truncate 拯救整个 flex 布局——它的宽度逻辑由 flex 引擎控制，CSS 截断只是最后一步。

想截两行并显示省略号，text-truncate 不行，得用 -webkit-line-clamp

Bootstrap 5 官方不提供多行截断工具类。text-truncate 硬套在 <p> 上，哪怕加了 max-height，也不会生效。必须手动补充：

• 必须同时设置 display: -webkit-box、-webkit-box-orient: vertical、-webkit-line-clamp: 2
• 仍需保留 overflow: hidden，否则第二行之后的内容会露出来
• 不能设 height（会导致截断位置错乱），建议用 max-height 配合行高估算
• Firefox 全版本不支持 -webkit-line-clamp，如需兼容，JS 方案是唯一可靠选择

自定义类名推荐用 text-ellipsis-2 而非覆盖 text-truncate，避免和 Bootstrap 响应式类冲突。

真正容易被忽略的是：省略号是否能被用户感知。加 title 属性看似简单，但它只在 DOM 计算宽度真超限时才触发——而 flex 或 grid 中的宽度计算常有偏差，min-width: 0 缺失时，title 就可能静默失效。