Flex子元素内的不换行是因其默认white-space: pre禁用自动断行，与Flex无关；需显式设white-space: pre-wrap、word-break: break-all、max-width: 100%及父项min-width: 0和flex-shrink: 1。

Flex子元素内的

或不换行，根本不是Flex的问题，而是

默认行为锁死了文本流——它天生拒绝折行，且Flex容器不会强制覆盖这个特性。

为什么

在Flex里照样不折行

元素默认有white-space: pre，浏览器会严格保留空格和换行，并禁用自动断行。即使把它放进display: flex容器、设了flex-wrap: wrap，这个内联级行为也不会被Flex主轴逻辑接管——Flex只管“如何排列子项”，不管“子项内部怎么渲染文本”。

• 它不是Flex子项的尺寸问题，而是
  自身语义决定的：设计初衷就是显示原始格式化内容（比如日志、代码片段）
• 加overflow-wrap: break-word对
  无效，因为white-space: pre优先级更高
• 设min-width: 0也没用——那只是解决Flex项收缩问题，不改变
  内部的排版规则

让

内容真正换行的实操写法

必须显式覆盖

的默认white-space，并配合断行控制：

• 用white-space: pre-wrap：保留原有换行和空格，但允许浏览器在必要时折行
• 加word-break: break-all或overflow-wrap: break-word处理长无空格串（如base64、URL）
• 确保父级Flex子项本身可缩：min-width: 0 + flex-shrink: 1，否则
  会被撑得溢出
• 别忘了max-width: 100%，防止
  无视容器边界

示例CSS：

图片转Word

将扫描图像、截图或表单、文档及以文字为主的图片内容，转换为可编辑的 Word（.docx）文件。 当用户提供包含文本内容的图片，并要求将其转为 Word 文档时，应使用此技能； 或用户表达类似“把图片搞成 word 文字版”、“convert image to docx”、“extract text from image to Word”等需求时，也应调用此技能。

下载

.code-block {
  white-space: pre-wrap;
  word-break: break-all;
  max-width: 100%;
}
.item {
  min-width: 0;
  flex-shrink: 1;
}

用替代

时的常见陷阱

是行内容器，默认没有white-space限制，但它也不自动换行——因为它的父元素（比如

或Flex子项）可能设了white-space: nowrap，或者没给足够宽度约束。

• 检查直接父元素是否意外继承了white-space: nowrap（常见于按钮、标签类组件）
• 内含长token时，仅靠overflow-wrap: break-word不够，必须同时设min-width: 0在它的父Flex子项上
• 避免对设display: block后忘记配width或max-width，否则它会按内容无限撑宽

移动端Safari中特别容易失效的点

iOS Safari（尤其15–16）对white-space: pre-wrap + flex-wrap: wrap组合计算不准，常表现为最后一行文字突然右移、高度塌陷或断行位置偏移。

• 临时修复：给
  加overflow: hidden或transform: translateZ(0)触发GPU加速重绘
• 更稳方案：改用
  模拟

  ，手动控制white-space和overflow
• 动态插入后若出现错位，读一次offsetHeight强制同步布局

真正卡住的从来不是flex-wrap写没写，而是把

当成普通块级元素去调Flex参数——它需要的是文本层干预，不是布局层调整。