多语言文本长度差异导致flex布局失灵，因浏览器对“内容自然宽度”计算异常；须在直接包裹文本的子元素上设无单位min-width: 0，并配合flex: 1 1 0及截断/换行四件套。
为什么多语言文本长度差异会让flex布局“失灵”
中英文混排、阿拉伯语RTL、泰文连字、越南语重音——这些不是样式问题，是浏览器对“内容自然宽度”的计算逻辑被干扰了。比如一个含18个连续无空格字符的阿拉伯语词，min-width: auto会把它当做一个不可分割单元，直接撑开整个flex item；而中文“设置”两个字又太短，导致同级卡片里文字区域宽窄不一，右侧数字标签（如“(12)”）位置飘忽不定。
必须在文本元素上加 min-width: 0，且不能带单位
这是所有修复动作的起点，漏掉就白调：
-
min-width: 0必须写在**直接包裹文本的子元素**上（比如.title > span），不是父容器，也不是 wrapper - 不能写成
min-width: 0px或min-width: 0%—— 只有无单位的min-width: 0在 Safari 14+、Firefox 91+、Chrome 84+ 全平台稳定生效 - 用 DevTools 检查 computed 样式，确认值是
0px，不是auto或fit-content
搭配 flex: 1 1 0 比 flex: 1 更可靠
flex: 1 展开为 flex: 1 1 0%，而百分比在 RTL 或东南亚文字渲染中容易推导异常；flex: 1 1 0 强制以 0px 为起点分配空间：
- 对阿拉伯语、希伯来语等 RTL 语言，
flex-basis: 0避免方向感知导致的初始宽度误判 - 对泰文、老挝文等含连字的文字，绕过浏览器对“字形簇宽度”的预估偏差
- 若需保留基础宽度又允许压缩，改用
flex: 1 1 auto+min-width: 0，比硬设flex-basis: 200px更适应多语言响应式
截断或换行必须配齐“四件套”，且作用于同一元素
仅靠 min-width: 0 不会自动显示省略号或换行，它只是解锁收缩能力：
- 要显示省略号：
white-space: nowrap+overflow: hidden+text-overflow: ellipsis+ 明确宽度（来自父容器width/max-width或自身flex-basis） - 要允许长单词换行：
overflow-wrap: break-word（主逻辑） +word-break: break-all（兜底，防无断点场景） -
text-overflow: ellipsis只对块级元素生效，span类行内元素要先加display: block或display: inline-block - 父容器必须有明确宽度约束：
width: 100%、max-width: 400px或受外层flex-basis限制；否则 flex 容器自身无限宽，子项再怎么缩也没意义
真正难的不是写对某一条规则，而是每次遇到溢出都得回头检查：父容器有没有宽度约束、子项是不是 flex 直接子、min-width 是否被其他规则覆盖、文本控制四件套有没有写全——漏掉任意一环，效果就消失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
