文字不换行的根本原因是缺少明确宽度边界，需同时设置white-space: normal、max-width、overflow-wrap: break-word及flex子项min-width: 0才能触发换行。
white-space: normal 是默认行为，但必须有宽度限制
单行文字“不换行”，往往不是它不肯换，而是浏览器压根没触发换行逻辑——因为没给它一个明确的“边界”。white-space: normal 确实是块级元素默认值，但它只在容器有**确定宽度**（width、max-width 或受父容器约束）时才生效。如果父容器宽度不定（比如 Flex 子项未设 min-width: 0，或表格列未设 table-layout: fixed），它会按内容撑开，看起来像“不换行”。
- 必须显式设置
width或max-width，例如max-width: 200px - 避免仅靠
overflow: hidden“假装”换行——它只是裁剪，不改变布局流 - 不要依赖
display: inline-block之类间接方式绕过宽度问题，治标不治本
overflow-wrap: break-word 解决无空格长串溢出
当单行里塞了 URL、Base64、一整串中文身份证号这类“无断点内容”时，white-space: normal 也束手无策。这时候要靠 overflow-wrap: break-word（旧写法 word-wrap: break-word 兼容 IE）。
- 它只在整词放不下时才断开，语义安全，“https://example.com” 可能断成 “https://example.com/very/long/path” 而非 “https:/…/exa/mple…”
- 别用
word-break: break-all，它会在任意字符间切，“用户中心” 可能变成 “用 户 中 心”，中文阅读体验直接崩坏 - 必须和
max-width配合使用，否则浏览器认为“没必要断”
Flex 布局下文字死活不换行？查 min-width: 0
这是线上最常被忽略的坑：明明写了 overflow-wrap: break-word 和 max-width，文字还是横向溢出。90% 是因为父容器用了 display: flex，而文本所在子元素没设 min-width: 0。
- Flex 子项默认
min-width: auto，会阻止内容收缩，换行逻辑被完全跳过 - 修复只需加
min-width: 0到文本容器本身（不是父 Flex 容器） - 即使子项用了
flex: 1，min-width: 0也不能省——flex不自动覆盖这个默认值
table td 里文字撑宽表格？先看 white-space 是否被锁死
表格单元格默认支持换行，但很多 UI 框架（如 Bootstrap 4+）或 CSS 重置会悄悄给 td 加上 white-space: nowrap。一旦锁死，再长的 URL 或中文串都会强行撑开列宽。
- 检查 computed styles，确认
white-space值是不是nowrap - 覆盖它：直接设
white-space: normal或更稳妥的overflow-wrap: break-word - 配合
table-layout: fixed+ 显式col宽度，才能真正控制单元格尺寸
width / max-width、white-space、overflow-wrap 和布局上下文（Flex / Table）四者协同的结果。少一个，就可能白配。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
