仅实现固定位置强制换行，无法解决长单词、url等溢出问题；需用overflow-wrap: break-word（首选）或word-break: break-all（兜底）配合white-space控制换行行为。
<br> 能解决单点强制换行，但对长单词、URL、无空格字符串无效；真正要让它们“断开换行”，必须靠 CSS 的 overflow-wrap 或 word-break。
用 <br> 强制换行只在固定位置生效
它只是插入一个视觉换行符，不改变文本流行为，也不影响自动换行逻辑。常见误用是把它塞进一段用户输入的富文本里想“模拟回车效果”——但只要容器宽度不够，长串字符（比如 https://example.com/very/long/path）依然会溢出。
注意三点：
-
<br>是空标签，写成<br>或<br>都可以，HTML5 推荐前者 - 不要在
<p></p>里堆叠多个<br>来模拟段落间距，该用margin就用margin - 它对屏幕阅读器无语义，纯属视觉 hack，无障碍支持弱
overflow-wrap: break-word 是处理长单词的首选
这个属性专为“容器装不下整个单词时才断开”而设计，优先保持单词完整性，可读性好。它比已废弃的 word-wrap 更现代，浏览器兼容性也足够（Chrome 21+、Firefox 3.5+、Edge 12+、Safari 6.1+）。
典型写法：
<div style="width: 200px; overflow-wrap: break-word;"> ThisIsAVeryLongBase64StringWithoutSpaces== </div>
关键点：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 只在必要时断词，比如单词本身比容器宽才触发
- 不会在英文单词中间随意切开（如
hello不会变成hel-+lo） - 对中文、日文等无天然词界的语言也友好，因为这些语言本就不依赖空格分词
word-break: break-all 是更激进的兜底方案
当 overflow-wrap: break-word 还是撑不开（比如超窄列宽 + 全数字 ID），就得上这个。它无视任何语言规则，在任意两个字符间都能断行。
风险明显：
- 英文会被硬切，
international可能变成inter-+nation-+al，影响可读 - URL 中的
https://可能被拆成https:/+/example...，点击失效 - 中文虽不受影响，但若混排英文或代码片段，体验会变差
仅建议用于：后台管理界面的 ID 列、日志表格、调试面板等对可读性要求低、宽度极端受限的场景。
别忘了配合 white-space 控制原始换行符是否生效
如果后端返回的文本含 \n，但页面没换行，大概率是容器用了 white-space: normal（默认值），它会把换行符当空白合并掉。
要让源码里的 \n 真正起作用，得配：
-
white-space: pre-line：保留换行符，合并多余空格，最常用 -
white-space: pre-wrap：既保留换行和空格，又允许自动折行，适合展示用户粘贴的带格式文本 - 慎用
white-space: pre：空格、缩进全保留，容易因缩进而破坏布局
真正棘手的情况，往往是 white-space 和 overflow-wrap 搭配不当——比如设了 pre 却忘了加 overflow-wrap，结果长 URL 直接撑破容器。这两个属性不是互斥的，而是各管一摊：一个管“怎么解析源码里的空白”，一个管“超长内容怎么断”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
