应使用而非的场景是同一语义块内需固定断行，如地址、诗歌、签名档；仅视觉换行无语义，不产生间距，而表示独立段落并自带默认上下边距。
什么时候该用 <br> 而不是 <p></p>
<br> 只干一件事：在当前段落内插入一个视觉换行，不产生语义分隔、不带上下边距。它适合地址、诗歌、签名档这类「同一语义块内需固定断行」的场景。
比如写联系信息：<p>张三<br>北京市朝阳区某某路123号<br>138-0013-8000</p>。如果换成多个 <p></p>，每行会多出默认 margin，间距失控，还破坏了“这是一个人的完整联系方式”这一语义。
- 误用
<br>的典型现象：用它代替列表、标题或段落结构，导致屏幕阅读器无法识别内容层级 -
<p></p>是语义化段落，浏览器自动加 margin-top/margin-bottom；<br>是纯表现指令，无额外间距 - HTML5 中必须写成
<br>（自闭合），不要写<br>或<br>，后者无效且可能触发解析错误
white-space: pre-line 和 pre-wrap 有什么实际区别
两者都保留源码里的换行符（\n），但对空格和自动折行的处理不同：
-
white-space: pre-line：合并连续空格和制表符，只保留换行符，并允许在容器边界处自动折行 —— 适合用户输入的富文本摘要、评论正文等「想保留回车但不想保留多余空格」的场景 -
white-space: pre-wrap：既保留换行符，也保留空格与制表符，同时仍支持自动折行 —— 适合代码片段预览、日志输出、带缩进的配置说明 - 单独写
\n在 HTML 文本中默认被忽略，必须配合这两个值之一才生效；white-space: pre虽然也保留换行，但禁止自动折行，容易撑破容器
长单词或 URL 溢出容器时怎么安全换行
浏览器默认不会拆分无空格字符串（如 https://example.com/verylongpathwithnohyphensorspaces），这时 <br> 无效，必须靠 CSS。
- 优先用
overflow-wrap: break-word（推荐）：只在必要时断开单词，尽量保持可读性；word-wrap: break-word是旧名，已废弃但仍有兼容性 - 激进方案用
word-break: break-all：无视词义，在任意字符间断行，中文效果尚可，英文会把 “international” 拆成 “inter-nation-al”，影响阅读 - 若容器宽度动态变化（如响应式卡片），别只设固定 width，要配合
max-width+overflow-wrap，否则小屏下仍可能溢出
为什么 <br> 在某些 CSS 下失效
常见于给父元素设了 white-space: nowrap 或 display: flex 且未设置 flex-wrap: wrap 的情况 —— 这些样式会覆盖 <br> 的换行能力。
-
<br>本质是生成一个“换行机会点”，但若父容器禁止换行（nowrap）或采用弹性布局且不允许换行（flex-nowrap），这个机会就被忽略 - 调试时可临时加
border: 1px solid red看元素是否真的占满整行，再检查父级 white-space / display / flex 属性 - 真正需要强制折行又受限于布局模型时，应改用
display: block+width: 100%控制子元素，而不是硬塞<br>
white-space: pre-line + overflow-wrap: break-word + 合理的容器 max-width，而不是寄希望于一个 <br> 标签解决所有问题。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
