html中换行需用、或white-space属性，因浏览器默认忽略\n；推荐white-space:pre-line兼顾兼容与排版，服务端\r\n需预处理为\n。
换行符在 HTML 里不生效，\n 是摆设
HTML 默认忽略所有连续空白字符（包括 \n、\t、多个空格），所以直接把带换行的字符串塞进 <p></p> 或 <div>，浏览器会全压成一行显示。
<p>常见错误现象：<code>console.log("第一行\n第二行") 在控制台看着有换行，但 document.body.innerHTML = "第一行\n第二行" 渲染出来还是“第一行第二行”。
- 真正起作用的是 HTML 标签，不是文本里的
\n - 服务端返回的纯文本（比如 API 响应体）或用户输入的
<textarea></textarea>内容，也得靠标签或 CSS 处理换行 - 别试图用
white-space: pre全局兜底——它会连空格和缩进都保留，破坏排版
<br> 是最直接的换行方式，但别手抖多写
想让“第一行”下面立刻空一行出“第二行”，就在中间插一个 <br> 标签：
document.body.innerHTML = "第一行<br>第二行";
使用场景：简单静态文案、邮件模板、后台管理界面的提示语等对结构要求不高的地方。
立即学习“前端免费学习笔记（深入）”；
易优cms汽车车辆租赁源码1.7.2
下载
由于疫情等原因大家都开始习惯了通过互联网上租车服务的信息多方面，且获取方式简便，不管是婚庆用车、旅游租车、还是短租等租车业务。越来越多租车企业都开始主动把租车业务推向给潜在需求客户，所以如何设计一个租车网站，以便在同行中脱颖而出就重要了，易优cms针对租车行业市场需求、目标客户、盈利模式等，进行策划、设计、制作，建设一个符合用户与搜索引擎需求的租车网站源码。 网站首页
-
<br>是空元素，不需要闭合（<br>即可，<br>也可，但没必要加斜杠） - 连续写多个
<br>会产生多余空白行，视觉上难控制，不如用 CSS 的margin或padding - 别在语义化容器里滥用，比如
<h3>标题<br>副标题</h3>—— 副标题应该用独立标签，不是靠<br>挤下去
用 <pre class="brush:php;toolbar:false;"></code> 保留原始换行和空格，但要小心缩进泄露</H3>
<p><code><pre class="brush:php;toolbar:false;"></code> 会原样渲染文本中的 <code>\n</code> 和空格，适合日志、代码块、ASCII 图这类需要格式对齐的内容。</p>
<pre class="brush:php;toolbar:false;">document.body.innerHTML = "<pre class="brush:php;toolbar:false;">第一行\n 第二行（前面有两个空格）\n第三行</pre>";
<p>性能/兼容性影响：几乎无负担，所有浏览器支持几十年了。但注意两点：</p>
<ul>
<li>
<code><pre class="brush:php;toolbar:false;"></pre> 默认是等宽字体，且自带上下外边距，可能和页面其他文字风格冲突
`第一行\n 第二行` 里的空格会被真实渲染——这不是 bug，是 <pre class="brush:php;toolbar:false;"></pre> 的本职工作<pre class="brush:php;toolbar:false;" style="font-family: inherit"></pre>
CSS 的 white-space 属性更灵活，但值选错就白忙
想让普通标签（比如 <p></p>）也认 \n，用 white-space 最靠谱。关键是选对值：
-
white-space: pre-line：推荐首选。合并空白符，但保留\n换行，且自动折行（适合用户评论、富文本摘要） -
white-space: pre-wrap：保留\n和空格，也允许折行（适合代码注释、带缩进的配置说明） -
white-space: pre：全保留，不折行——长文本会撑破容器，必须配overflow-wrap: break-word救场 - 别用
normal（默认值）或nowrap，它们直接无视\n
示例：<p style="white-space: pre-line">第一行\n第二行</p> —— 这才是日常最稳的方案。
容易被忽略的是：服务端返回的字符串如果来自数据库字段，可能含 \r\n（Windows 换行），而前端 JS 通常只处理 \n。真要兼容，得先 .replace(/\r\n/g, '\n')。
