是自闭合标签，仅适用于纯文本内需视觉换行且不改变段落结构的场景，如地址、诗行、签名；误用于段落内会导致语义混乱和样式异常。


是个自闭合标签，用它换行确实简单，但直接塞进文本里常导致布局失控或语义混乱。

什么时候该用
？

只在纯文本内部需要视觉换行、且不改变段落结构时才合适——比如地址、诗行、签名落款这类天然有换行需求但又不属于独立段落的内容。

常见错误现象：

第一行
第二行

看似能换行，但语义上仍是同一段；若后续加 CSS text-align 或 line-height，容易意外影响第二行对齐。

• ✅ 正确场景：

  <p>北京市朝阳区<br></p>

• ❌ 错误场景：用
模拟标题+副标题、列表项、按钮文案分行
• ⚠️ 注意：
不会触发新块级上下文，无法解决浮动、flex 项目内换行等布局问题


和 CSS 换行方案怎么选？

如果换行是为排版服务（比如让长标题在小屏折行），优先用 CSS：

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

• white-space: pre-line：保留换行符，合并多余空格，适合从后端吐出带 \n 的文本
• word-break: break-word 或 overflow-wrap: break-word：强制超长单词/URL 折行
• Flex 容器中对单个子元素用 flex-wrap: wrap + 固定宽度，比硬插
更可控

硬塞
在响应式页面里特别危险——小屏下可能多出多余空行，大屏又撑不开，CSS 方案能随视口自动调整。

兼容性和写法细节


在所有浏览器都支持，但写法必须规范：

• HTML5 中只接受
（无斜杠），
虽被多数浏览器宽容处理，但在 XHTML 模式或某些校验工具里会报错
• 不要给
加 class 或 id——它没有内容，加样式毫无意义；真要控制间距，请调 margin 或 line-height 的父容器
• 连续多个
（如


）是典型坏习惯，用 margin-bottom 替代

真正难的不是怎么敲
，而是判断“这里到底需不需要它”——多数时候，换行需求背后其实是语义缺失或 CSS 控制力不足。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！