br标签是语义化换行标记，仅用于地址、诗歌、歌词等同一段落内需强制折行的场景；不可替代段落或用作布局，否则损害可访问性、seo及响应式表现。
br 标签不是“换行样式”，而是“内容结构的一部分”；用错地方，等于把排版逻辑硬塞进 HTML，后期改样式、适配屏幕、做无障碍支持都会出问题。
什么时候必须用 br，而不是 CSS
只有当换行本身是内容语义的一部分，且无法被其他语义化标签替代时，br 才合理：
- 地址块中省、市、区、街道、邮编逐行排列（
<p>北京市<br>朝阳区<br>某某街道123号<br>100000</p>） - 诗歌或歌词——每行对应一个乐句或意群，换行不可被压缩或合并
- 命令行模拟输出（如终端日志），需严格保留原始换行位置
- HTML 邮件模板中为兼容 Outlook 等老客户端做的降级处理
这些场景的共同点是：换行信息来自内容本身，且必须精确、稳定、不可响应式调整。
white-space: pre-line 和 pre-wrap 怎么选
两者都保留源码中的换行符，但对空格和自动折行的处理不同：
-
white-space: pre-line：合并连续空格和制表符，只保留换行符并换行；超出容器宽度时仍会自动折行（适合用户输入的富文本、评论、后台导出的带换行的字段） -
white-space: pre-wrap：既保留所有空白符（包括空格缩进），又允许长行在容器边界处折行（适合代码片段、带格式的日志、需要保留缩进的配置说明）
别用 pre——它完全禁用自动换行，超长 URL 或无空格字符串会直接撑破容器。
为什么不能用多个 br 实现“空行”效果
这是最常踩的坑。写 <br><br> 模拟段落间距，实际做了三件事：
- 把视觉节奏（留白）写死在 HTML 里，CSS 无法统一控制
- 屏幕变小时，多行
br仍存在，可能造成意外空白堆叠 - 读屏软件会把每个
br当作一次换行播报，影响无障碍体验
正确做法是：用 <p></p> 包裹语义段落，再通过 margin-bottom 控制间距；或用 div + margin 做无语义分隔。
遇到中文长字符串溢出，br 完全无效
br 只响应你手动插入的位置，对“一整串没空格的中文/英文/数字”毫无作用。此时必须用 CSS：
-
word-break: break-all：允许在任意字节间断行（中文友好，但可能把“数据库”切成“数据/库”） -
overflow-wrap: break-word：优先保持单词完整，仅在必要时断开长词（更安全，推荐首选） - 两者可组合：
word-break: break-word; overflow-wrap: break-word;（注意：break-word是overflow-wrap的取值，不是word-break的）
真正难处理的，从来不是“要不要换行”，而是“在哪换、怎么断、断了是否还易读”——br 不参与这个决策，它只听你指令；而 CSS 的换行属性，才真正面对内容与容器之间的张力。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
