text-truncate在卡片中失效需检查三件事：一是文字容器未设宽度或max-width，二是父容器为flex布局时子项缺少min-w-0导致无法收缩，三是行内元素未转为inline-block或块级元素；截两行须用-webkit-line-clamp而非text-truncate。
text-truncate在卡片里加了没反应？检查这三件事
不是类写错了，是它根本没被触发。Bootstrap 的 text-truncate 只封装了 overflow: hidden、text-overflow: ellipsis 和 white-space: nowrap，但不设宽度、不改 display、也不管父容器是否锁死子项。卡片中常见失效点：
- 卡片内容区（比如
.card-body）没设max-width或固定宽，overflow: hidden无边界可裁 - 文字容器是
<p></p>或<div>，但父卡片用了 <code>display: flex（如.card-horizontal），子项默认min-width: auto，拒绝收缩 - 直接给
<span></span>加text-truncate—— 行内元素不支持text-overflow，必须先转成display: inline-block或块级 - 目标元素加
class="min-w-0 text-truncate"（Bootstrap ≥5.3） - 或写内联样式：
style="min-width: 0"+text-truncate - 避免父卡片上设
flex-shrink: 0或min-width: unset - 宽度建议用
max-w-sm/max-w-md等响应式类，比固定w-100更稳 - 自定义类（如
text-ellipsis-2），不能覆盖text-truncate，避免和 Bootstrap 响应式工具冲突 - 必须同时写全：
display: -webkit-box、-webkit-box-orient: vertical、-webkit-line-clamp: 2、overflow: hidden - 加
max-height: calc(1.2em * 2 + 0.4em)（估算两行高度），别用height，否则可能切掉半行文字 - Flex 卡片中仍需
min-w-0，否则scrollWidth不超限，title属性也不会弹出 - Flex 子项缺
min-w-0，DOM 宽度被撑到和内容等宽，scrollWidth ≈ offsetWidth - 卡片用了
col但没指定尺寸（如只写col没写col-8），列宽不确定，offsetWidth不稳定 - 文字含全角标点或 emoji，浏览器换行判断偏差，导致
white-space: nowrap实际未生效
Flex 布局卡片中 text-truncate 生效的最小配置
Bootstrap 卡片用 .d-flex 或 .flex-row 布局时，文字容器哪怕加了 text-truncate 也大概率失效，因为 Flex 子项优先撑开宽度。必须显式释放收缩能力：
想截两行？别硬套 text-truncate，用 -webkit-line-clamp
text-truncate 天然只对单行生效，因为它依赖 white-space: nowrap。要截两行，得换方案：
title 提示不弹出来？不是 JS 问题，是 DOM 计算没溢出
很多人给截断文字加 title 属性指望悬停看全文，结果静默失效。根本原因是浏览器只在 scrollWidth > offsetWidth 时才触发提示。而以下情况会让计算失准：
真正容易被忽略的是：省略号和 title 是两个独立机制，一个靠 CSS 渲染，一个靠 DOM 尺寸计算。它们都依赖“明确宽度”这个前提，但 Flex、Grid、Table-cell 这些布局会悄悄绕过它。漏掉 min-w-0 或 max-width，就等于没给它们发开工指令。
