如何用HTML代码实现逐行显示文本内容？

本文共计1044个文字，预计阅读时间需要5分钟。

HTML 默认忽略所有连续空白字符（包括 、、多个空格），直接将带有换行的字符串填充进 。

常见错误现象：console.log("第一行\n第二行") 在控制台看着有换行，但 document.body.innerHTML = "第一行\n第二行" 渲染出来还是“第一行第二行”。

• 真正起作用的是 HTML 标签，不是文本里的 \n
• 服务端返回的纯文本（比如 API 响应体）或用户输入的 <textarea> 内容，也得靠标签或 CSS 处理换行
• 别试图用 white-space: pre 全局兜底——它会连空格和缩进都保留，破坏排版

<br> 是最直接的换行方式，但别手抖多写

想让“第一行”下面立刻空一行出“第二行”，就在中间插一个 <br> 标签：

document.body.innerHTML = "第一行<br>第二行";

使用场景：简单静态文案、邮件模板、后台管理界面的提示语等对结构要求不高的地方。

立即学习“前端免费学习笔记（深入）”；

• <br> 是空元素，不需要闭合（<br> 即可，<br /> 也可，但没必要加斜杠）
• 连续写多个 <br> 会产生多余空白行，视觉上难控制，不如用 CSS 的 margin 或 padding
• 别在语义化容器里滥用，比如 <h3>标题<br>副标题</h3> —— 副标题应该用独立标签，不是靠 <br> 挤下去

用 <pre> 保留原始换行和空格，但要小心缩进泄露

<pre> 会原样渲染文本中的 \n 和空格，适合日志、代码块、ASCII 图这类需要格式对齐的内容。

document.body.innerHTML = "<pre>第一行\n 第二行（前面有两个空格）\n第三行</pre>";

性能/兼容性影响：几乎无负担，所有浏览器支持几十年了。但注意两点：

• <pre> 默认是等宽字体，且自带上下外边距，可能和页面其他文字风格冲突
• 如果 JS 拼接字符串时用了模板字符串 + 缩进，`第一行\n 第二行` 里的空格会被真实渲染——这不是 bug，是 <pre> 的本职工作
• 想保留换行但不要等宽字体？加 CSS：<pre style="font-family: inherit">

CSS 的 white-space 属性更灵活，但值选错就白忙

想让普通标签（比如 <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')。