长文本溢出根本原因是white-space、overflow-wrap、min-width未协同：pre-wrap保留换行且自动折行，overflow-wrap: break-word安全断词，Flex子项必须设min-width: 0才能触发换行。
长文本不换行、溢出容器、撑破布局，不是内容太长，而是white-space、overflow-wrap、min-width三者没配对好。
white-space: pre-wrap 是保留用户换行 + 自动折行的唯一方案
用户从表单提交的带回车的文本（比如评论、日志），直接塞进<div>或<code><p></p>里，浏览器默认把\n当空格处理，整段“塌”成一行。用white-space: normal能折行但丢掉原始换行；用white-space: pre保留换行但不折行，长行直接横向溢出。
此时必须用：white-space: pre-wrap——它原样保留所有\n、\t和空格，同时允许在容器右边界自动折行。
- 不用额外套
<p></p>或<pre class="brush:php;toolbar:false;"></pre>，适合 Markdown 渲染后、富文本粘贴等场景 - 别跟
text-overflow: ellipsis混用：二者逻辑冲突，pre-wrap下省略号不会出现 - 如果只想要“保留换行 + 单行截断”，得先用 JS 或后端把内容转成单行再加
white-space: nowrap
overflow-wrap: break-word 处理无空格长串（URL/身份证号/中文长串）
默认 HTML 只在空格、连字符或标点处换行。遇到https://a.b.c.d.e.f.g.h.i.j.k.l.m.n.o.p或一整段中文“110101199003072154”，它会直接溢出——这不是 bug，是浏览器默认行为。
立即学习“前端免费学习笔记（深入）”；
要让它真正断开，关键不是加<br>，而是用overflow-wrap: break-word（旧写法word-wrap: break-word也兼容）。
-
overflow-wrap: break-word只在整词放不下时才断，语义安全，推荐首选 - 别用
word-break: break-all，它会在任意字符间切，“用户”变“用”+“户”，中文可读性崩坏 -
word-break: keep-all在中文下等于禁用换行，和overflow-wrap混用会失效
Flex 容器里文字不换行？根本原因是子项没设 min-width: 0
这是线上最隐蔽的问题：明明写了overflow-wrap: break-word，文字还是溢出。90% 是因为父容器用了display: flex，而子元素（比如<div>）没设<code>min-width: 0。
Flex 子项默认min-width: auto，会阻止内容收缩，导致换行逻辑被绕过。
- 修复只需加
min-width: 0到文本所在元素上（不是父容器） - 不要靠
overflow: hidden强行触发换行——它只是藏起溢出，不解决根本问题 - 如果子项还用了
flex: 1，min-width: 0依然必要，不能省略
table td 不换行？先检查是否被white-space: nowrap锁死
表格单元格默认支持换行，但很多 UI 框架（如 Bootstrap 4+）或重置样式悄悄给td加了white-space: nowrap，导致一串 URL 或长英文单词死活不折行，表格被拉宽甚至出现横向滚动条。
查一下 DevTools 的 computed 样式，看white-space是不是nowrap。如果是，覆盖它：
- 显式设
white-space: normal（常规文本）或pre-wrap（含用户换行） - 配合
overflow-wrap: break-word处理长单词 - 记得设
width或max-width，否则即使属性正确，浏览器也可能不触发换行
最容易被忽略的是 Flex 场景下的min-width: 0，以及pre-wrap和text-overflow: ellipsis的互斥关系——这两个组合一旦写错，调试半天也看不出问题在哪。
