必须为直接包裹文本的子元素设min-width: 0（无单位），配合flex: 1 1 0、white-space: nowrap、overflow: hidden、text-overflow: ellipsis及明确宽度，才能可靠实现多语言文本在Flex容器中的收缩与省略。
flex项必须设min-width: 0，否则多语言文本会撑爆容器
浏览器对中英文混排、阿拉伯语RTL、泰文连字、越南语重音等复杂脚本的“自然宽度”估算极不可靠，尤其遇到长URL或无空格base64字符串时，min-width: auto会让整个不可分割单元成为flex项最小宽度基准——哪怕容器只有200px宽，一个含18个连续字符的希伯来语词也能把它顶开。
必须在直接包裹文本的子元素（比如.title > span）上写min-width: 0，且只能是无单位的0：min-width: 0px或min-width: 0%在Safari/Firefox/Chrome最新版都不稳定。DevTools里检查computed样式，确认值是0px而非auto或fit-content。
flex: 1 1 0比flex: 1更可靠，尤其对RTL和东南亚文字
flex: 1展开为flex: 1 1 0%，而百分比在阿拉伯语、希伯来语等RTL布局中容易被方向感知逻辑误判初始宽度；泰文、老挝文的连字簇宽度预估也常因flex-basis带单位而偏差。flex: 1 1 0强制以0px为起点分配空间，配合min-width: 0后，宽度收缩行为可预测：
- 对RTL语言，避免从右向左推算时把“内容宽度”错当成“容器预留宽度”
- 对含连字的文字，绕过浏览器对字形簇宽度的模糊估算
- 若需保留基础宽度又允许压缩，改用
flex: 1 1 auto+min-width: 0，比硬设flex-basis: 200px更适应多语言响应式
截断省略号要四件套齐备，且必须同级作用
min-width: 0只是解锁收缩能力，不会自动显示...。真正让text-overflow: ellipsis生效，需同时满足四个条件，缺一不可，且都得写在同一个元素上：
-
white-space: nowrap：必须写在目标元素上，不能靠父级继承；否则中文、日文会提前折行，失去“单行溢出”前提 -
overflow: hidden：必须作用于同一元素；否则子项仍按内容宽度撑开，你看到的是被顶开的盒子，不是被裁剪的文本 -
text-overflow: ellipsis：只对块级元素生效，span类行内元素要先加display: block或display: inline-block - 父容器要有明确宽度约束：
width: 100%、max-width: 400px或受外层flex-basis限制；否则Flex容器自身无限宽，子项再怎么缩也没意义
别依赖flex-wrap: wrap来救长单词换行
当容器内有长无空格字符串（如邮箱、base64、越南语长词），flex-wrap: wrap本身不解决换行问题——它只控制flex项是否换行，不干预项内部文本如何折行。
此时overflow-wrap: break-word才是关键，但它会被min-width: auto压制。所以顺序必须是：
- 先给文本容器设
min-width: 0 - 再设
overflow-wrap: break-word或word-break: break-all（后者破坏单词结构，慎用） -
flex-wrap: wrap只用于多列卡片布局等场景，别指望它替你处理单个flex项内的文本流
最易被忽略的一点：所有这些规则必须作用于直接包裹文本的元素，而不是它的父wrapper或flex容器——wrapper上设min-width: 0完全无效，浏览器根本不会拿它去约束子项内容宽度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
