br标签仅用于同一语义单元内强制换行，如地址、诗歌、歌词；不可替代段落或间距控制，否则损害语义、可访问性与响应式表现。
直接用 <br> 最快，但多数时候不该用它——它只解决“视觉换行”，不解决“语义结构”问题。
什么时候必须用 <br>
仅限于同一语义单元内需强制分行的场景：
- 地址信息（
<p>北京市朝阳区XX路<br>XX大厦10层</p>） - 诗歌、歌词、ASCII 艺术等依赖原格式的文本
- 富文本编辑器导出的纯 HTML 内容（如 CMS 后台生成的字段值）
关键判断：删掉所有 <br> 后，内容是否仍属于同一个自然段？如果是，<br> 才合理。否则就是滥用。
为什么不能用 <br> 代替段落或间距
常见错误是写成这样：
立即学习“前端免费学习笔记（深入）”；
<p>标题<br><br>正文第一段<br><br>正文第二段</p>
这会导致：
- 屏幕阅读器把整块内容读作一个段落，语义混乱
- 无法用 CSS 精确控制段间距（
<br>不是可样式化元素） - 响应式断点下，多余换行可能破坏布局
- SEO 工具难以识别真实段落结构
正确做法是用 <p> 包裹每段，再用 margin 控制间距。
white-space 属性适合哪些换行需求
当你要让一段文本“按源码换行”或“禁止自动换行”，white-space 比一堆 <br> 更可靠：
-
white-space: pre-line：保留换行符，合并多余空格，允许自动折行（适合用户输入的带换行的简介） -
white-space: nowrap：强制单行（常用于导航菜单项） -
white-space: pre-wrap：保留空格和换行，也允许自动折行（适合代码片段预览）
注意：pre 值会让长行横向溢出，必须配合 overflow-x: auto 或 max-width 防止破坏布局。
容易被忽略的细节
三个实际开发中常踩的坑：
-
<br>在<pre>或white-space: pre元素里无效——这些环境本身已按源码解析换行 - 服务端模板（如 Jinja2、Thymeleaf）输出含换行符的字符串时，浏览器默认忽略，必须加
white-space: pre-line才生效 - 移动端 Safari 对
white-space: pre-line的兼容性没问题，但若配合flex容器，需确认父级未设flex-wrap: nowrap
