flex容器默认不换行，需显式设flex-wrap: wrap；子项溢出主因是未设min-width: 0，导致内容拒绝收缩；text-overflow: ellipsis生效需white-space: nowrap、overflow: hidden、min-width: 0、明确宽度四者同置。
Flex容器默认不换行，所以“子元素不换行”不是bug，而是flex-wrap: nowrap的默认行为；真正的问题是：你本意想让它换行，却没显式启用换行逻辑，或启用了却因子项拒绝收缩而“假装没换行”。
为什么加了flex类还是不换行？
因为flex只等价于display: flex，不带flex-wrap。浏览器按默认flex-wrap: nowrap处理——哪怕子项总宽远超容器，它也硬塞单行，结果就是横向溢出、文字撑开、滚动条意外出现。
- 检查父容器是否同时写了
display: flex和flex-wrap: wrap（或 Tailwind 的flex-wrap） - 确认没误加
flex-nowrap、whitespace-nowrap这类锁死行为的类 - 用开发者工具看「Computed」面板里
flex-wrap的最终值，不是源码写了什么，而是它生效的是不是wrap
flex-wrap: wrap加了但还是溢出？缺min-width: 0
Flex子项默认min-width: auto，浏览器会优先保内容完整（比如一个长URL或连续无空格字符串），宁可撑破容器也不压缩。光靠flex-wrap不够，得让子项“愿意缩”。
-
min-width: 0必须加在**含文本的直接子元素**上，例如<p></p>或<span></span>，写在外层容器无效 - Tailwind 中对应
min-w-0，别只给div.flex加，要加到p或span上 - 嵌套 Flex 场景（如头像+文字块再包一层 flex），内层需收缩的文本元素也要单独加
min-w-0，不会继承 - DevTools 里看 computed
min-width，如果还是auto，说明选择器没命中
想截断显示省略号？四件套必须同置同一元素
text-overflow: ellipsis是纯装饰层，不参与尺寸计算，漏掉任意一条条件都会失效：
-
white-space: nowrap必须写在这层，否则文字提前换行，根本没机会单行溢出 -
overflow: hidden必须作用于同一元素，且该元素得是块级（display: block或inline-block） -
min-width: 0必须存在，否则flex-shrink被内容宽度卡住，裁剪逻辑压根不触发 - 明确宽度约束：来自父容器的
max-width或自身flex-basis；仅靠flex: 1（等价于flex: 1 1 0%）不稳定，推荐flex: 1 1 0
移动端滚动卡顿或 Safari 不生效？补-webkit-overflow-scrolling: touch
iOS Safari 上，overflow-x: auto容器滚动常卡顿或惯性失效。必须加这句才能启用原生滚动引擎：
- 只对
overflow为auto或scroll的元素生效 - 不能和
transform同时用在同一个元素上，否则可能触发渲染 bug - Tailwind 用户可手动加
style="-webkit-overflow-scrolling: touch;"，v3.3+ 无内置类 - 现代项目可只写这一句，无需前缀判断；但要注意它不解决
min-width: 0缺失导致的根本溢出问题
真正卡住的往往不是某一行代码，而是min-width: 0没加在正确元素上，或者overflow: hidden加错了层级——它必须作用于实际发生溢出的容器，而不是最外层 wrapper。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
