br标签仅用于地址、诗歌、歌词等需保留语义换行的场景，不可替代p或margin实现间距；软换行由white-space等css属性控制，与br无关。
br 标签只管强制换行，不负责语义、不产生间距、不响应容器宽度变化。软换行（即自动换行）则完全由 CSS 控制，和 HTML 标签无关。
什么时候该用 br，而不是靠 CSS 换行
真正需要 br 的场景非常有限，典型如：
• 地址块里「街道」「城市」「邮编」必须分三行，且不能被响应式拉成一行
• 诗歌或歌词，换行位置是内容语义的一部分，删掉就破坏原意
• 表单内联提示文案，比如「用户名：」后面紧跟 br 再跟错误信息
常见误用：
• 用多个 br 替代 p 或 margin 来制造段落间距
• 在列表项之间塞 br，而不是用 li 自带的块级行为
• 后端返回带 \n 的字符串，前端直接 innerHTML 渲染，指望它自动换行——它不会
white-space 值选错，软换行就失效
默认 white-space: normal 会合并空白符并允许自动换行，但以下情况会打破它：
• 设了 white-space: nowrap：整段文本死扛不折行，哪怕溢出容器
• 设了 white-space: pre：保留所有空格和换行，但不自动折行，超宽就横向滚动
• 设了 white-space: pre-line：保留源码换行符，但合并多余空格，且允许自动折行——这是多数用户输入场景最稳妥的选择
注意：pre-wrap 和 pre-line 都能识别 \n，但前者保留所有空格缩进，后者只认换行符；如果后端传的是带缩进的 Markdown 源码，pre-wrap 更合适。
长单词/URL 撑破容器？别硬塞 br，用 CSS 断词
遇到 https://very-long-url-with-no-slashes-or-dots 这类内容，br 完全无用，必须靠 CSS：
• overflow-wrap: break-word：只在必要时断开单词，优先保持可读性
• word-break: break-all：粗暴地在任意字符间切断，适合日志、哈希值等非自然语言场景
• 中文建议配 word-break: break-all，英文更推荐 overflow-wrap: break-word
兼容写法要同时声明：overflow-wrap: break-word;word-wrap: break-word;
最常被忽略的一点：换行行为最终由**容器的 display 类型 + width + white-space + word-break 四者共同决定**，单独调一个属性往往没用。比如给 span 加 white-space: pre-line，却不设 display: block 或明确宽度，它依然可能被压成一行——因为内联元素默认无视 width。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
