HTML 的 <p> 标签默认忽略回车换行符，需用 <br> 标签、white-space: pre-line CSS 或 JS 替换 \n 才能实现换行效果。
HTML 的 <p> 标签本身**不会识别回车换行符（\n）**，你在源码里敲的回车、空行或缩进，在浏览器中默认全部被忽略——它只按语义把内容当作一个连续段落，由浏览器自动折行（根据容器宽度）。想让文本里的换行符真正显示为换行，得靠额外处理。
直接在 HTML 源码中写换行（不推荐）
如果你手动编辑 HTML 文件，可以在 <p> 内直接换行书写，但必须配合 CSS 才生效：
- 仅换行不加样式 → 浏览器当空格处理，无效果
- 加上
white-space: pre-line或pre-wrap才能识别换行符 - 例如：
<p style="white-space: pre-line;">第一行↵第二行↵第三行</p>（↵ 表示你按的 Enter）
用 <br> 标签手动换行
这是最常用、最可靠的方式，适合固定格式文本（如地址、诗句、表单提示）：
-
<br>是空标签，不带语义，只起视觉换行作用 - 写法：
<p>姓名：张三<br>电话：138****1234<br>地址：北京市朝阳区</p> - 注意：不要用多个
<br><br>模拟段间距，该用margin就用 CSS
从后端或 JS 动态渲染时处理换行符
如果文本来自数据库、用户输入或 API（含 \n），需转换才能显示：
立即学习“前端免费学习笔记（深入）”；
- 前端 JS 替换：
text.replace(/\n/g, '<br>')，再用innerHTML插入 - 或用 CSS：
white-space: pre-line，前提是传入的文本真包含未转义的\n - Vue/React 中常用
v-html或dangerouslySetInnerHTML配合替换
避免常见误区
别指望纯文本换行“自动生效”，也别滥用 <br> 替代语义结构：
-
<p>之间自然有间距，这是它的本职；段内换行才是<br>或 CSS 的事 -
white-space: pre会保留所有空格和换行，但禁用自动折行，容易溢出容器 - 长单词（如 URL）要换行，优先用
overflow-wrap: break-word，不是靠<br>
