IE10 Flex文本换行是底层缺陷：混淆white-space: nowrap与min-width: auto，内联元素易折行；需显式设white-space: nowrap、flex-basis配合flex-shrink: 0、弃用align-content多行布局、慎用伪元素。
IE10里flex容器内文字突然换行，根本不是CSS写错了
这是IE10 Flexbox实现的底层缺陷：它把white-space: nowrap和min-width: auto逻辑搞混了，哪怕你没设white-space，只要项目内容是内联元素（比如纯文本、span），IE10就可能强行折行。不是你漏写了white-space: nowrap，而是IE10压根不按规范解析它。
实操建议：
- 对所有可能含文本的Flex子项，显式加
white-space: nowrap——别依赖继承或默认值 - 如果内容必须换行（比如长URL、英文无空格字符串），改用
word-break: break-all或overflow-wrap: break-word，但得配合max-width才生效 - 避免在IE10中对Flex子项用
display: inline-block或display: inline，这会让折行行为更不可控
flex-shrink: 0在IE10里可能完全失效
IE10对flex-shrink的支持是半残的：当父容器display: flex且子项没设flex-basis时，IE10会忽略flex-shrink: 0，导致本该固定宽度的项目被压缩变形，进而触发文本挤出、折行。
实操建议：
- 凡是要禁用收缩的项目，必须同时写
flex-shrink: 0和flex-basis: auto（或具体值如flex-basis: 200px） - 慎用
flex: 0 0 auto缩写——IE10对这个缩写的解析不稳定，拆成独立属性更可靠 - 如果项目是按钮或图标+文字组合，优先给整个容器设
min-width，比依赖flex-shrink更稳
IE10不认flex-wrap: wrap下的align-content
当Flex容器设了flex-wrap: wrap，你想用align-content: center垂直居中多行内容，IE10直接无视——它只支持单行容器的align-content，而且连stretch都常出错。结果就是文字在第二行堆叠、错位、折行位置诡异。
实操建议：
- 多行Flex布局在IE10里基本放弃
align-content，改用margin: auto或text-align: center配合display: inline-block模拟 - 如果必须用多行，把每“行”单独包一层Flex容器（即嵌套Flex），外层控制行间距，内层用
justify-content和align-items——这两个IE10支持得相对好 - 检查
height是否被设为100%或auto：IE10在flex-wrap下对高度计算极敏感，缺height或min-height会加剧折行
伪元素::before/::after在IE10 Flex里会引发折行
哪怕只是加个content: ""的空伪元素，IE10也会把它当成一个Flex项目参与布局，占位、撑宽、干扰文本流，尤其在flex-direction: row下，它可能把后面的文字硬挤到下一行。
实操建议：
- IE10兼容模式下，尽量不用伪元素做装饰性布局；真要用，加
flex: none和order: -1（IE10认order）把它踢出主流程 - 如果伪元素是用来清除浮动或占位，直接用真实
div并设visibility: hidden，比伪元素可控 - 检查开发者工具里是否多出一个“匿名Flex项目”——IE10常把未声明
display的伪元素识别为display: inline，从而破坏Flex流
IE10的Flex文本折行问题，本质是它把Flex项目当成“带弹性的块级盒子”来算，但又没完整实现弹性算法。最保险的做法不是堆CSS hack，而是提前在HTML结构里切断文本与Flex项目的强绑定——比如把关键文本再包一层span并设死white-space和min-width。这点容易被忽略，因为其他浏览器根本不需要这么干。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
