text-truncate生效需同时满足容器有明确宽度、元素为块级上下文、父容器允许内容收缩；常见失效原因包括inline元素未转块级、table-cell未重置display、Flex子项缺min-w-0等。
text-truncate 加了没反应？不是类坏了，是它根本没被触发——它只在三个条件同时满足时才显示省略号：容器有明确宽度、元素为块级上下文、父容器允许内容收缩。
为什么 text-truncate 加了却没省略号
它只是 overflow: hidden + text-overflow: ellipsis + white-space: nowrap 的快捷写法，不带宽度、不改 display、也不管 flex 布局是否锁死子项。常见失效点：
- 直接用在
<span></span>上 →span是 inline 元素，text-overflow不生效；得加class="d-inline-block"或换成<div> <li>放在 <code><td> 里 → 默认 <code>display: table-cell，不支持text-overflow；需显式加class="d-block" - 嵌在 Flex 容器中 → 子项默认
min-width: auto，文字撑开宽度，截断逻辑跳过；必须加class="min-w-0"（Bootstrap ≥5.3）或style="min-width: 0" - 父容器用了
col但没指定尺寸（如只写col没写col-8）→ 列宽不确定，overflow: hidden无从判断边界 - 最轻量解法：给目标元素加
class="min-w-0 text-truncate"（Bootstrap ≥5.3） - 兼容旧版：加
style="min-width: 0"再套text-truncate - 别写
flex-shrink: 0在父容器上——这等于给子项上锁 - 避免混用
text-truncate和h-50：行高估算不准时，第二行下半部分可能被硬裁掉 - WebKit 方案（Chrome/Safari/Edge 16+）：用
display: -webkit-box+-webkit-box-orient: vertical+-webkit-line-clamp: 2+overflow: hidden，必须保留，否则第三行内容会漏出来 - 不能设
height，建议用max-height配合行高估算（如line-height: 1.5× 2 =max-height: 3rem） - 如需兼容 Firefox，只能 JS 回退：监听容器高度，测量
scrollHeight > clientHeight后动态截字符串 - 常见诱因：Flex 子项缺失
min-w-0，导致scrollWidth ≈ width - 验证方法：打开 DevTools → Computed → 查
min-width是否为0px，再看scrollWidth > offsetWidth是否成立 - 稳妥做法：确保父容器设置了
min-width: 0（尤其在 Flex / Grid 布局中），必要时用 JavaScript 动态判断再设置title
text-truncate 在 Flex 布局里怎么配才可靠
Flex 引擎先算尺寸，CSS 截断只是最后一步。不释放子项的收缩能力，text-truncate 就是摆设：
想截两行？text-truncate 行不通，得换方案
Bootstrap 官方不提供多行截断类。text-truncate 硬套在 <p></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/gongju/2501" title="Bootstrap"><img
src="https://img.php.cn/upload/manual/001/431/639/6a6713f6cfa4e217.png" alt="Bootstrap" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/gongju/2501" title="Bootstrap" class="overflowclass">Bootstrap</a>
<p class="overflowclass">Bootstrap 5.3.8 编译版包含可直接用于项目的 CSS、JavaScript 和插件文件，适合快速搭建响应式网页。</p>
</div>
<a rel="nofollow" href="/xiazai/gongju/2501" title="Bootstrap" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div> 上只会让第一行被截半，或完全没反应：
title 属性不弹出？大概率是 scrollWidth 没超限
很多人给截断元素加 title 显示完整文本，但鼠标悬停没反应——不是 JS 问题，是浏览器判定“没真正溢出”：
min-w-0，宽度计算偏大，scrollWidth 不超限，title 和省略号都会失效——这个细节最容易被忽略。
