Flex项目默认min-width: auto阻止文本换行，需设min-width: 0或min-content才能使word-break: break-all生效；flex-wrap: nowrap下超宽内容会溢出而非换行；word-break适合强制断词，overflow-wrap优先保持单词完整。
Flex容器里长单词不换行，word-break没生效？先看父级display和flex-wrap
Flex项目默认是min-width: auto，会阻止内部文本换行，哪怕你写了word-break: break-all也白搭。这不是word-break失效，而是Flex的收缩行为在“撑腰”。
-
flex-shrink: 1（默认值）会让项目优先缩小自身宽度，但不会主动触发文本换行——它宁可把整个项目压扁，也不让文字折行 - 必须显式设置
min-width: 0或min-width: min-content来解除这个限制，才能让word-break真正起作用 - 如果容器设了
flex-wrap: nowrap（默认），且子项内容超宽，浏览器可能直接溢出，而不是换行
word-break和overflow-wrap到底该选哪个？
处理长单词时，word-break: break-all会无差别断词（比如reactjs可能切成reacoverflow-wrap: break-word只在必要时才断——即当前行放不下整个单词时才切，更符合阅读习惯。
- 中文/日文等无空格语言：用
word-break: break-all或break-word效果接近，但break-word更安全 - 英文路径、哈希值、UUID这类纯ASCII长串：
overflow-wrap: break-word优先，避免在不该断的地方切开（如sha256-abc...中间） -
word-break: keep-all对中日韩有效，但对英文无效——它只阻止这些语言内的断行，不约束英文单词
Flex项目加white-space: normal有时比word-break还管用
很多情况下，问题根源不是“不能断”，而是“不让断”——元素被设了white-space: nowrap（常见于按钮、标签组件的重置样式），导致文本铁定不换行。
- 检查是否意外继承了
white-space: nowrap，尤其来自UI库或全局CSS重置 -
white-space: normal+overflow-wrap: break-word组合，比单用word-break: break-all更可控 - 如果项目是
flex-direction: column，注意height限制可能导致内容被裁剪而非换行——此时需配合overflow: hidden或auto
React/Vue里动态类名漏掉min-width: 0是最常见的坑
用className或:class条件切换样式时，很容易只记得加word-break，却忘了配套的min-width重置。一旦Flex项目有固定宽度或弹性行为变化，换行立刻失效。
- 推荐写成原子类组合：
flex-item-truncate包含min-width: 0、overflow-wrap: break-word、white-space: normal - 不要依赖CSS-in-JS的“自动重置”，像
styled-components或emotion不会帮你补min-width - Chrome DevTools里检查Computed面板，重点看
min-width是否真为0px——有时候min-width: auto看起来像0，实则仍是阻断源
Flex布局下文本换行真正的卡点从来不在word-break本身，而在它和min-width、white-space、flex-shrink之间那几毫秒的博弈。漏掉任意一环，都可能让样式看起来“随机失效”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
