服务器返回JSON文本含换行，HTML显示无换行的解决方法求助

这个问题我做项目时也踩过坑！JSON返回的文本里的\n换行符，在HTML里默认会被浏览器当作普通空格处理，不会自动换行。下面给你三种不同场景下的实用解决办法：

1. 用HTML标签直接处理：<pre> 标签 #

如果你希望完全保留文本里的换行和空格格式，直接用<pre>标签包裹文本就好。这个标签专门用来展示预格式化的内容，会原样保留所有空白字符：

<pre>这是从JSON获取的文本
包含换行符\n的话，这里会直接显示换行</pre>

⚠️ 注意：如果文本里包含HTML特殊字符（比如<、>、&），需要先转义这些字符，否则可能会破坏页面结构或者引发XSS风险。

2. 用CSS控制换行：white-space 属性 #

如果不想用<pre>标签（比如要自定义文本的字体、间距），可以给文本容器加CSS的white-space属性，有两个常用值：

• pre-line：会保留换行符，同时合并连续的空格，文本超出容器宽度时会自动换行
• pre-wrap：保留换行符和所有空格，文本超出宽度时也会自动换行

示例代码：

.text-display {
  white-space: pre-line; /* 按需选pre-line或pre-wrap */
  font-family: sans-serif; /* 可以自定义字体 */
  line-height: 1.5; /* 调整行高 */
}

<div class="text-display">{{ 你的JSON文本内容 }}</div>

这个方法最灵活，能兼顾格式和样式自定义。

3. 用JavaScript替换换行符为<br> #

如果需要动态处理文本（比如异步获取JSON后渲染），可以用JS把\n替换成HTML的换行标签<br>：

// 假设jsonResponse是从服务器拿到的响应对象
const rawText = jsonResponse.yourTextKey;
// 全局替换所有\n为<br>
const formattedText = rawText.replace(/\n/g, '<br>');
// 插入到页面元素中
document.getElementById('target-element').innerHTML = formattedText;

⚠️ 同样要注意：如果文本是用户输入的不可信内容，直接用innerHTML可能会有XSS风险，建议先转义特殊字符，或者用textContent结合<br>元素来插入（比如创建<br>节点拼接）。

内容的提问来源于stack exchange，提问作者NoteStylet