html 的 标签默认忽略回车换行符，需用 标签、white-space: pre-line css 或 js 替换 \n 才能实现换行效果。
HTML 的 <p></p> 标签本身**不会识别回车换行符（\n）**，你在源码里敲的回车、空行或缩进，在浏览器中默认全部被忽略——它只按语义把内容当作一个连续段落，由浏览器自动折行（根据容器宽度）。想让文本里的换行符真正显示为换行，得靠额外处理。
直接在 HTML 源码中写换行（不推荐）
如果你手动编辑 HTML 文件，可以在 <p></p> 内直接换行书写，但必须配合 CSS 才生效：
- 仅换行不加样式 → 浏览器当空格处理，无效果
- 加上
white-space: pre-line或pre-wrap才能识别换行符 - 例如：
<p style="white-space: pre-line;">第一行↵第二行↵第三行</p>（↵ 表示你按的 Enter）
用 <br> 标签手动换行
这是最常用、最可靠的方式，适合固定格式文本（如地址、诗句、表单提示）：
-
<br>是空标签，不带语义，只起视觉换行作用 - 写法：
<p>姓名：张三<br>电话：138****1234<br>地址：北京市朝阳区</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf"><img src="https://img.php.cn/upload/skill/000/000/081/178956546773641.jpg" alt="html-ppt-to-pdf" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="overflowclass">html-ppt-to-pdf</a> <p class="overflowclass">将使用 `<section class="slide">` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。</p> </div> <a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> - 注意：不要用多个
<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></p>之间自然有间距，这是它的本职；段内换行才是<br>或 CSS 的事 -
white-space: pre会保留所有空格和换行，但禁用自动折行，容易溢出容器 - 长单词（如 URL）要换行，优先用
overflow-wrap: break-word，不是靠<br>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
