text-truncate在Flex中不显示省略号是因为子项默认min-width: auto阻止收缩，需在文本元素上显式设min-width: 0、max-width: 100%及overflow-wrap: break-word，并确保父容器有宽度约束和flex-shrink: 1。
text-truncate在Flex里不显示省略号？先查min-width和flex-shrink
不是text-truncate类失效，是Flex子项默认min-width: auto锁死了收缩能力。浏览器宁可撑破容器，也不让文字换行或裁剪。你得手动解开这个锁：
-
min-width: 0必须加在目标文本元素上（比如<div class="text-truncate">本身），不能只加在父级 - 子项要设
flex-shrink: 1（Bootstrap 4里用flex-shrink-1类）——flex: 1不行，它等价于flex: 1 1 0%，flex-basis带百分比会干扰计算 - 确保父容器有明确宽度约束：比如
max-width: 100%、w-100，或外层是col-md-6这类带宽度的栅格
长URL/哈希串仍撑开容器？overflow-wrap: break-word要配max-width
text-overflow: ellipsis只管“裁剪”，不管“换行”。遇到eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9这种无空格字符串，必须靠overflow-wrap: break-word来断开。但它有个前提：容器得先被允许压缩。
- 顺序不能错：先
min-width: 0→ 再max-width: 100%（或具体值如max-width: 300px）→ 最后overflow-wrap: break-word - 别混用
word-break: break-all——它会在任意字符间切分，比如把example.com切成exa…，破坏可读性 - 中文场景下，
word-break: break-word已废弃，现代写法统一用overflow-wrap: break-word
Bootstrap 4里没min-w-0类？手写style或补CSS规则
Bootstrap 4官方不提供min-w-0工具类（那是BS5才加的）。直接写style="min-width: 0"最稳妥，或者在项目CSS里补一条：
.min-w-0 {
min-width: 0 !important;
}
注意两点：
立即学习“前端免费学习笔记（深入）”；
- 旧版Safari（≤15.6）对
flex: 1 1 0推导min-width: 0支持不稳定，显式声明更可靠 - 如果文本嵌套在另一个Flex块里（比如头像+文字并排），那个内层文字容器也得单独加
min-width: 0
响应式小屏下仍溢出？检查flex-direction和max-width层级
在flex-direction: column布局中，min-width: 0不影响垂直方向，但文本截断始终发生在水平维度。所以关键不是父容器高度，而是目标文本项自身的max-width是否生效。
- 移动端常见漏点：
max-width: 100%加在父容器，但文本元素是inline或未设display: block，导致宽度继承失败 - 调试时盯死DevTools的Computed面板：确认目标元素的
min-width是0px（不是auto）、flex-basis是0px、white-space是nowrap - 表格单元格（
<td>）里用text-truncate，必须额外加class="d-block"，因为table-cell不支持text-overflow
min-width: 0的位置——它必须落在text-truncate所在的那个DOM节点上，而不是它的父级或祖父级。 
