<br>标签不支持响应式断点控制，因其是内容级强制换行指令，需用CSS（如white-space、Flex布局）实现条件换行；仅地址、诗歌、命令行等语义固定场景才应保留<br>。
br 标签本身不支持响应式断点控制
直接用 <br> 无法在不同屏幕宽度下“有条件地换行”——它一旦写进 HTML，就在所有设备上生效。这不是 bug，是设计使然：<br> 是内容级的强制换行指令，不是样式开关，浏览器不会根据 @media 查询动态插入或移除它。
想实现“小屏换行、大屏不换行”，得用 CSS 替代方案
真实业务中需要响应式断行，本质是「根据容器宽度决定是否折行」，这属于表现层逻辑，必须交由 CSS 处理：
- 给容器加
white-space: pre-line，后端或 JS 提供带\n的字符串（如"标题副标题"），再配合媒体查询切换white-space值 - 对固定位置的断点（如“第1名”后面），用
display: inline-block包裹前后文字，再用@media (max-width: 768px) { .break-after-rank::after { content: "\A"; white-space: pre; } }—— 但注意::after在某些旧浏览器里对换行支持不稳定 - 更稳妥的做法：用 Flex 布局 +
flex-wrap: wrap，把本该断行的两块内容拆成独立子元素，小屏时允许换行，大屏时设flex-direction: row
为什么不能用 JavaScript 动态增删 br
手动监听 resize 并插入/移除 <br> 看似可行，但实际踩坑多：
- 频繁操作 DOM 触发重排，影响滚动性能
- SSR 或 Hydration 过程中，服务端渲染和客户端状态不一致，导致首屏闪动或焦点错乱
- 屏幕阅读器可能缓存初始结构，动态删
<br>后语义未同步更新，造成读音割裂（比如“确认”被读成“确”、“认”两段） - React/Vue 中若用
v-html或dangerouslySetInnerHTML注入含<br>的字符串，每次更新都需重新解析，XSS 防御成本陡增
真正该保留 br 的场景非常窄
只有当换行是内容不可分割的一部分，且跨设备都必须保持相同视觉结构时，才用 <br>：
立即学习“前端免费学习笔记（深入）”；
- 地址块里的每行（
<p>上海市徐汇区漕溪北路1号<br>邮编:200030</p>） - 诗歌原文分行（作者意图不可变，
<p>山高水长<br>云淡风轻</p>） - 命令行模拟输出（
<pre>npm run dev<br>Starting dev server...</pre>）
这些情况不需要响应式“取消换行”，因为换行本身就是语义的一部分。一旦你开始思考“要不要在 iPad 上去掉那个 <br>”，说明它本就不该存在——该换成 white-space 或布局方案。
