overflow-wrap: break-word单独写无效，因其是条件触发策略而非开关，需配合max-width、min-width: 0、white-space: normal及解除nowrap压制才生效。
overflow-wrap: break-word 为什么单独写没用
它不是开关，而是策略：只在“无自然断点的长串”超出容器时才介入。但浏览器必须先确认“容器有边界”，否则根本不会触发。常见失效原因包括：
- 父容器没设
max-width或width，浏览器按内容撑开，没“该在哪折”的依据 - 元素是
inline（如默认span），overflow-wrap对 inline 元素不生效，需加display: block或inline-block - 继承了
white-space: nowrap（UI 框架表格单元格、按钮常默认设这个） - 在
flex容器里，子项默认min-width: auto，宁可撑宽也不换行
Flex 布局中长英文死活不换行怎么办
这不是 CSS 写错了，是 Flex 的抗压缩行为在起作用。子项默认拒绝缩小，overflow-wrap 直接被跳过。必须显式解除这个限制：
- 给目标元素加
min-width: 0（iOS Safari ≤15.6 需要显式写，不能只靠flex: 1隐含） - 如果还设了
flex-shrink: 0，min-width: 0会被覆盖，必须先删掉它 - 避免用
overflow: hidden替代——它虽能触发 BFC 间接重置最小宽度，但在某些 Android WebView 中不稳定 - 配合
max-width: 100%，否则 flex 子项可能无视换行逻辑
中英文混排时 overflow-wrap 失效的隐藏原因
中文每个字都是天然断点，浏览器认为“有地方可断”，于是直接跳过 overflow-wrap 的兜底逻辑——结果就是“测试test1234567890”这种文本，中文部分正常断，英文部分照旧撑出容器。
解决办法是让英文部分也进入“不可分割”判定路径：
- 加
word-break: keep-all：阻止中文被意外劈开，同时把英文长串标记为“整体不可分” - 必须配
max-width: 100%，否则keep-all在 flex 中仍可能失效 - iOS 12 以下需补
-webkit-word-break: keep-all - 别全局设
word-break: break-all——它会把“数据库”切成“数”“据”“库”
pre 标签里长英文怎么安全换行
pre 默认禁用换行，overflow-wrap 直接无效。正确组合是：
-
white-space: pre-wrap：保留原始缩进和换行，同时允许自动换行 -
overflow-wrap: break-word：对其中的长 URL 或 token 起作用 - 建议加
font-family: monospace和line-height: 1.4提升可读性 - 绝对不要用
word-break: break-all——代码变量名被切开会严重干扰理解
最常被忽略的是上下文压制：哪怕属性全对，只要父容器是 flex 且没清 min-width，或内容套在未设宽的 inline 元素里，所有换行策略都会静默失效。调试时优先检查 computed 样式里的 white-space 和 min-width 值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
