HTML长文本自动换行需用overflow-wrap: break-word处理无空格长串，配合white-space: pre-wrap保留用户换行，Flex布局下须设min-width: 0，避免word-break: break-all破坏中文可读性。
默认情况下，HTML 文本会在空格、连字符或标点处自动换行；但遇到无空格长串（如 URL、Base64、一整段中文身份证号），它会直接溢出容器——这不是 bug，是浏览器的默认行为。要让它“真正自动换行”，关键不是加 <br>，而是用对 CSS 属性并避开常见布局陷阱。
word-wrap / overflow-wrap：处理长单词和 URL 溢出
这是最常用也最容易写错的属性。现代标准是 overflow-wrap: break-word，旧版 IE 支持 word-wrap: break-word，两者等价。
-
overflow-wrap: break-word只在整词放不下时才断开，语义安全，推荐首选 - 别用
word-break: break-all除非你明确接受“用户”被切成“用”和“户”——它会在任意字符间断，破坏可读性 - 避免混用
word-break: keep-all（中文下等于禁用换行）和overflow-wrap，它们逻辑冲突 - 示例：
<div style="width: 200px; overflow-wrap: break-word;">https://example.com/very/long/path/with/no/spaces/or/linebreaks</div>
white-space: pre-wrap：保留用户输入的换行符 + 自动折行
当文本来自表单输入（如评论、留言），用户按了回车，你既想保留那个换行，又不想让超长行撑破容器，white-space: pre-wrap 是唯一兼顾两者的方案。
- 它保留源码中的所有空格、制表符和换行符，同时允许在容器边界处自动折行
- 不能用
white-space: pre，它不折行，长内容会横向滚动或溢出 - 别配
white-space: normal+<br>混搭，<br>在normal下会被忽略（只认空格/换行符） - 示例：
<div style="width: 300px; white-space: pre-wrap;">第一行\n第二行\nhttps://a.very.long.url.that.should.wrap</div>
Flex 容器里文字不换行？根本原因是 min-width: auto
这是线上最隐蔽的问题：明明写了 overflow-wrap，文字还是溢出。90% 是因为父容器用了 display: flex，而子元素（比如 <span> 或 <div>）没设 min-width: 0。
立即学习“前端免费学习笔记（深入）”；
- Flex 子项默认
min-width: auto，会阻止内容收缩，导致换行逻辑失效 - 修复只需加
min-width: 0到文本所在元素上（不是父容器） - 不要靠
overflow: hidden强行触发换行——它只是藏起溢出，不解决根本问题 - 示例：
<div style="display: flex"><div style="min-width: 0; overflow-wrap: break-word;">一长串没有空格的中文文本</div></div>
中文长串不换行？优先用 overflow-wrap，别信 word-break: break-all
中文天生无空格，浏览器默认只在标点或换行符处断，所以一整段身份证号或手机号会直接溢出。很多人第一反应是加 word-break: break-all，但它会让“北京市”变成“北”“京”“市”，阅读成本陡增。
- 正确做法是只加
overflow-wrap: break-word，它会把整串当一个“超长单词”，仅在必要时断开 - 如果容器宽度极小（如移动端窄列），再考虑降级为
word-break: break-word（注意：非标准，仅部分浏览器支持）或word-break: break-all，但务必加视觉提示（如省略号或背景色） - 检查是否误加了
white-space: nowrap—— 这个属性会彻底关闭所有换行，包括overflow-wrap
真正卡住换行的，往往不是没写 CSS，而是某层父容器悄悄继承了 white-space: nowrap，或者 Flex 布局下漏了 min-width: 0。调试时先查 computed styles，再逐层往上 inspect display 和 white-space 值——比反复试属性更省时间。
