如何通过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，也可能因未触发收缩逻辑而溢出。