仅用于同一语义单元内强制视觉换行，如地址、诗行；不可替代分段，否则破坏语义、影响可访问性与响应式布局。
自动折行靠 CSS，强制换行用 <br> —— 但选错场景会破坏语义、撑破布局、或在移动端失效。
什么时候该用 <br>？
仅当「同一语义单元内需视觉断行」时才适用，比如地址、诗行、按钮内固定文案。它不产生新段落，也不带间距。
- ✅ 合理：
<p>北京市朝阳区建国路8号<br>邮编：100022</p>—— 地址是一体的，但物理上分两行 - ❌ 错误：
<p>欢迎访问我们的网站<br>点击下方按钮开始使用</p>—— 这其实是两个句子，该拆成两个<p></p> - ⚠️ 注意：
<br>在<button></button>或<input type="button">中默认有效；但在禁用 HTML 解析的环境（如某些 CMS 的富文本字段）可能被过滤或转义
white-space 怎么选值？
这个属性决定空格、换行符是否保留，以及是否允许自动折行。别只记名字，看行为差异：
-
white-space: normal;—— 默认值，合并所有空白，允许在空格/标点后折行；但遇到https://verylongurl.com/...会溢出 -
white-space: pre-wrap;—— 保留源码里的换行和空格，同时允许在容器边界处折行；适合用户评论、后台编辑器输出 -
white-space: pre-line;—— 合并连续空格，但把换行符转成<br>效果；比pre-wrap更“干净”，常用于日志预览 -
white-space: nowrap;—— 强制单行，配合overflow: hidden;做截断效果（如表格表头）
长单词/URL 撑破容器怎么办？
哪怕设置了 white-space: normal;，一串无空格字符（如 Base64、JWT、长路径）仍不会折行。必须加断词控制：
-
overflow-wrap: break-word;—— 推荐首选；只在整词放不下时才从中间断开，尽量保全单词可读性 -
word-break: break-all;—— 激进模式；无视语言规则，在任意字节间断行；中文几乎看不出区别，英文会把“international”断成“inter- national” - 别用
word-break: break-word;—— 它不是标准属性，部分浏览器不识别，属于历史遗留写法 - 兼容旧版可双写：
overflow-wrap: break-word; word-wrap: break-word;（后者是前者旧名）
为什么有时写了 <br> 却没换行？
常见真因不是标签写错，而是上下文压制了换行行为：
- 父容器设了
white-space: nowrap;——<br>被忽略，整个块强制单行 - 按钮或输入框用了
text-transform: uppercase;+white-space: normal;，但内容本身无空格且超长，导致视觉上“没断开” - 服务端模板（如 Jinja2、Thymeleaf）自动转义了
<br>，输出成了纯文本<br>；需确认是否调用了|safe或th:utext - CSS 设置了
line-height: 0;或font-size: 0;，让换行符存在但不可见
最易被忽略的一点：自动换行能力依赖于容器有明确宽度（width、max-width 或弹性约束）。如果父元素是 display: inline-block; 且未设宽，overflow-wrap 和 white-space 都可能“失效”——不是代码错了，是布局没给它折行的机会。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
