white-space: pre-line 是最稳妥的默认选择，它让浏览器把文本中的 当成换行，同时自动合并多余空格和制表符，适用于用户留言、api返回带换行的描述字段等场景。
直接用 <br> 最快，但多数场景该用 CSS 的 white-space 属性——因为换行本质是渲染问题，不是标签堆砌问题。
为什么 <br> 不该乱用
它只是插入一个强制换行点，不带语义，也不响应内容变化。用户从 <textarea></textarea> 提交的文本里有 5 个
，你没法手动插 5 个 <br>；后端返回一段带换行的日志，你也无法提前知道哪该断行。
常见错误现象：
• 把用户输入的字符串直接 innerHTML = text，结果所有换行都变成空格
• 在 Vue/React 中用 v-html 或 dangerouslySetInnerHTML 渲染原始文本，却没做
→ <br> 转换，导致排版全塌
• 用多个 <br><br> 模拟段间距，破坏可访问性且难以维护
white-space: pre-line 是最稳妥的默认选择
它让浏览器把文本中的
当成换行，同时自动合并多余空格和制表符，视觉干净又语义清晰。
适用场景：
• 展示用户在 <textarea></textarea> 里写的留言、反馈、备注
• 渲染 API 返回的带换行的描述字段（如商品详情、错误日志）
• 需要保留换行但不关心缩进或空格对齐的普通富文本
注意点：
• 必须确保传入的字符串里真有
（不是被转义成
或 HTML 实体）
• 不要和 textContent 混用：用 textContent 就失效，得用 innerText 或直接设 style
• 示例：<p style="white-space: pre-line;">第一行
第二行
第三行</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img
src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a>
<p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p>
</div>
<a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
什么时候该选 pre-wrap 而不是 pre-line
当你需要保留原文里的多个连续空格、缩进、甚至制表符时，pre-wrap 更合适——它既保留
，也保留空格，还允许长行自动折行。
典型使用场景：
• 展示代码片段（哪怕不用 <pre class="brush:php;toolbar:false;"></pre>）
• 渲染诗歌、ASCII 图、带缩进的配置说明
• 用户粘贴过来的带格式文本（比如从 Word 或 Notes 复制）
性能影响很小，但要注意：
• 如果文本含恶意 HTML 标签，pre-wrap 不提供任何过滤，必须配合 XSS 清洗
• 在窄屏设备上，过长无空格的行（如 base64 字符串）可能溢出容器，需额外加 overflow-wrap: break-word
别忽略 <pre class="brush:php;toolbar:false;"></pre> 标签的真实用途
它不是“高级 <br>”，而是专为**源码级精确还原**设计的：所有空白字符（空格、 、
）原样输出，且默认用等宽字体。
所以：
• 不要用它包普通段落，会破坏阅读节奏和字体一致性
• 真要用时，务必重置 CSS：<pre class="brush:php;toolbar:false;" style="font-family: inherit; margin: 0;"></pre>
• 它和 white-space: pre 效果一致，但语义更强——屏幕阅读器会提示“预格式化内容”
• 错误用法：把用户评论用 <pre class="brush:php;toolbar:false;"></pre> 包起来，结果字体变小、行高变大、移动端挤成一团
真正难的不是选哪个方案，而是确认数据流里换行符是否存活：从 <textarea>.value</textarea> 取值时是
，但经过 JSON 序列化、URL 编码、后端模板渲染后，它可能早已变成 \n 或
。没验证这一步，所有 CSS 和标签都白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
