text-overflow: ellipsis在flex中失效的根本原因是子项默认min-width: auto阻止收缩，必须在直接文本元素上设min-width: 0，并同级配合white-space: nowrap、overflow: hidden、明确宽度约束四者缺一不可。
在 H5 页面中，Flex 布局下 text-overflow: ellipsis 失效，不是代码写错了，而是浏览器默认行为卡住了截断逻辑——关键在于 Flex 子项“拒绝收缩”，必须主动松开它的最小宽度限制。
给直接包裹文本的 Flex 子项加 min-width: 0
这是最核心、最通用的解法。Flex 子项默认 min-width: auto，意味着它宁可撑宽容器或引发横向滚动，也不愿压缩自身内容。加 min-width: 0 是唯一可靠方式，告诉浏览器：“允许我缩到比文字还小”。
- 必须加在**直接显示文字的元素上**，比如
.title、.desc，而不是父级 Flex 容器（如.card） - 不能写成
min-width: 0px或min-width: 0%，部分安卓 WebView 和旧版 Safari 不认 - 即使用了
flex: 1，也要加——因为flex: 1默认等价于flex: 1 1 0%，而0%在某些场景下仍受min-width: auto干扰
三件套必须同级、同块、同时生效
省略号不是单靠一个属性实现的，四个条件缺一不可，且必须写在同一选择器里：
-
white-space: nowrap：强制单行，否则换行就谈不上“溢出” -
overflow: hidden：隐藏超出部分，是text-overflow的前提 -
text-overflow: ellipsis：触发省略号渲染 - 明确的宽度约束：可以是
width: 100%、max-width: 200px或由 Flex 父容器自然提供的可用空间（如flex: 1+ 固定父宽）
处理长英文/URL 等无空格内容
纯字母、数字或 URL 没有自然断点，浏览器仍按整词计算最小宽度，即使加了 min-width: 0 也可能不截断。
- 补上
word-break: break-word或overflow-wrap: break-word，让长串强制折断 - 若需保持单行，优先用
word-break: break-all（慎用，可能断词生硬） - 注意：这些断行属性要和三件套写在同一元素上
嵌套 Flex 场景要逐层设 min-width: 0
H5 中卡片、列表、信息栏常多层嵌套，失效往往发生在中间某一层。
- 例如：
.card { display: flex; }→.info { display: flex; }→.text { ... }，那么.info也得加min-width: 0 - 检查 DevTools 的 Computed 面板，确认每一层 Flex 子项的
min-width都是0px，不是auto - 特别留意
inline-flex容器，它同样适用该规则
