在HTML/React中安全显示带换行符文本的两种专业方法
在实际开发中，我们经常会遇到需要在页面上展示后端返回的文本内容，而这些文本中往往包含换行符（如 \n 或 \r\n）。如果直接把这类文本渲染到页面上，换行符会被HTML忽略，所有内容会挤在同一行，非常影响阅读体验。本文将介绍两种在不同场景下处理这类问题的专业方案。
基础场景：原生HTML中处理换行符
在原生HTML中，文本内容里的换行符默认不会转换成页面的换行效果，我们可以使用 <pre> 标签或者CSS属性来实现换行展示。
方法1：使用 <pre> 标签
<pre> 标签会保留文本中的空格、换行符等格式，按照文本原本的排版进行渲染，非常适合展示带格式的文本内容。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>pre标签处理换行示例</title>
</head>
<body>
<!-- 后端返回的带换行符的文本 -->
<pre>
第一行内容
第二行内容
第三行内容
</pre>
</body>
</html>这种方式的优点是简单直接，不需要额外处理文本，缺点是所有内容都会使用等宽字体显示，且预设了默认的边距样式，可能需要额外调整CSS来适配页面风格。
方法2：使用CSS的 white-space 属性
如果我们不想使用等宽字体，也可以通过给普通容器添加CSS的 white-space: pre-line 属性来保留换行符，同时合并多余的空格，更贴合普通文本的展示需求。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS处理换行示例</title>
<style>
.text-content {
white-space: pre-line;
/* 可选：设置普通字体，避免等宽字体样式 */
font-family: "Microsoft YaHei", sans-serif;
}
</style>
</head>
<body>
<div class="text-content">
第一行内容
第二行内容
第三行内容
</div>
</body>
</html>这里的 white-space: pre-line 会保留文本中的换行符，同时把连续的空格合并成一个，既实现了换行效果，又不会像 <pre> 标签那样保留过多不必要的空白。
React场景：安全渲染带换行的文本
在React项目中，我们通常会从接口获取包含换行符的文本数据，如果直接通过 {text} 渲染，换行符不会生效；如果直接用 dangerouslySetInnerHTML 插入包含 <br> 标签的内容，又会有XSS安全风险。下面介绍安全的处理方式。
方法1：将换行符转换为数组渲染
我们可以把包含换行符的文本按照换行符分割成数组，然后遍历数组渲染每一行内容，在每行之间插入 <br> 标签，这种方式不需要操作HTML字符串，安全性更高。
import React from "react";
const TextWithNewline = ({ content }) => {
// 按照换行符分割文本，兼容 \n 和 \r\n 两种情况
const lineList = content.split(/\r?\n/);
return (
<div className="text-content">
{lineList.map((line, index) => (
<React.Fragment key={index}>
{line}
{/* 最后一行不需要添加换行标签 */}
{index !== lineList.length - 1 && <br />}
</React.Fragment>
))}
</div>
);
};
export default TextWithNewline;使用时只需要传入后端返回的文本即可：
import React from "react";
import TextWithNewline from "./TextWithNewline";
const App = () => {
// 模拟后端返回的带换行符的文本
const backendText = "这是第一行内容\n这是第二行内容\n这是第三行内容";
return (
<div>
<h3>带换行文本展示</h3>
<TextWithNewline content={backendText} />
</div>
);
};
export default App;这种方式的优点是完全避免了操作HTML字符串，不会有XSS风险，而且逻辑清晰，容易维护，适合大多数React项目的文本展示场景。
方法2：使用 dangerouslySetInnerHTML 时的安全处理
如果确实需要用 dangerouslySetInnerHTML 来渲染内容（比如文本内容本身包含可信的HTML标签），我们可以先对文本做转义处理，再把换行符替换成 <br> 标签，最大程度降低安全风险。
import React from "react";
// 转义HTML特殊字符，防止XSS攻击
const escapeHtml = (text) => {
const map = {
"&": "&",
"<": "<",
">": ">",
"\"": """,
"'": "'"
};
return text.replace(/[&<>"']/g, (char) => map[char]);
};
const SafeHtmlWithNewline = ({ content }) => {
// 先转义特殊字符，再把换行符替换成br标签
const safeHtml = escapeHtml(content).replace(/\r?\n/g, "
");
return (
<div
dangerouslySetInnerHTML={{
__html: safeHtml
}}
/>
);
};
export default SafeHtmlWithNewline;使用时同样传入文本内容即可：
import React from "react";
import SafeHtmlWithNewline from "./SafeHtmlWithNewline";
const App = () => {
const backendText = "这是第一行内容\n这是第二行内容\n<script>alert('xss')</script>";
return (
<div>
<h3>安全转义后展示</h3>
<SafeHtmlWithNewline content={backendText} />
</div>
);
};
export default App;这里的转义函数会把文本中的HTML特殊字符先转换成实体，即使文本中包含恶意脚本代码，也会被当成普通文本渲染，不会执行，同时换行符会被替换成 <br> 实现换行效果。
方案选择建议
不同场景下可以选择不同的方案：
- 原生HTML简单展示：优先选择CSS的
white-space: pre-line属性，样式更灵活 - React项目常规文本展示：优先选择分割数组渲染的方式，安全性最高，无需处理HTML字符串
- React项目需要渲染可信HTML内容：再考虑使用转义后的
dangerouslySetInnerHTML方案，并且一定要先做字符转义
在实际开发中，尽量避免直接使用 dangerouslySetInnerHTML，优先选择更安全的文本处理方式，可以有效减少项目的安全风险。