多语言文本因混排、rtl书写、连字、重音等导致浏览器难以准确计算“内容自然宽度”，尤其遇长无空格字符串时，min-width: auto会错误撑开容器；必须在直接包裹文本的子元素上设置无单位的min-width: 0，并配合white-space: nowrap、overflow: hidden、text-overflow: ellipsis及明确父宽才能可靠截断。
为什么多语言文本更容易触发Flex溢出
中英文混排、阿拉伯语从右向左书写、泰文连字、越南语重音符号等，会让浏览器对“内容自然宽度”的计算更复杂。尤其当文本里夹着长URL、邮箱或未换行的base64字符串时，min-width: auto会按整个不可分割单元算最小宽度——比如一个含20个连续无空格字符的越南语词，可能直接撑开容器。
必须加min-width: 0，且只写在目标文本元素上
这是所有修复动作的起点，不是可选项：
-
min-width: 0必须写在直接包裹文本的子项上（比如.title或.desc > span），而不是父容器或wrapper - 不能写成
min-width: 0px或min-width: 0%——只有无单位的min-width: 0在Safari 14+、Firefox 91+、Chrome 84+全平台稳定生效 - DevTools里检查computed样式，确认
min-width值已变成0px，不是auto或fit-content
flex: 1 1 0比flex: 1更稳，尤其对RTL和复杂脚本
flex: 1展开为flex: 1 1 0%，而百分比在RTL布局或某些东南亚文字渲染中容易推导异常；flex: 1 1 0强制以0px为起点分配空间，配合min-width: 0后，宽度计算更确定：
- 对阿拉伯语、希伯来语等RTL语言，
flex-basis: 0能避免方向感知导致的初始宽度误判 - 对泰文、老挝文等含连字的文字，
flex-basis: 0绕过浏览器对“字形簇宽度”的预估偏差 - 若需保留基础宽度又允许压缩，改用
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容器自身无限宽，子项再怎么缩也没意义
多语言场景下，还建议补一句word-break: break-word——它能在单词/URL内部合理断行，比break-all更尊重语义，且不破坏ellipsis触发条件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
