解决 HTML 中文本换行符不生效的问题

在开发 Web 应用时，我们经常会遇到从 API 获取的文本数据中包含换行符（\n），但在渲染到页面时，这些换行符却没有生效，导致文本显示为一行。

问题原因

HTML 默认会忽略文本中的空白符（包括空格和换行符），除非显式地告诉浏览器如何处理这些空白符。具体来说：

1. 空白符合并：HTML 会将连续的空白符（包括空格、换行符和制表符）合并为一个空格。
2. 换行符无效：即使文本中包含换行符（\n），浏览器也会将其渲染为一个空格，而不是换行。

解决方案

以下是几种常见的解决方案，可以确保响应文本 responseText 中的换行符在页面上正确显示：

1. 使用 white-space: pre-wrap CSS 属性

通过设置 white-space: pre-wrap，可以保留文本中的空白符和换行符，并在必要时换行。

.response-text {
	white-space: "pre-wrap";
}

2. 使用 CSS 的 white-space: pre-line

如果只想保留换行符而不保留多余的空格，可以使用 white-space: pre-line。

.response-text {
	white-space: "pre-line";
}

3. 将换行符替换为 <br> 标签

将文本中的换行符（\n）替换为 HTML 的 <br> 标签，这样浏览器会将其渲染为换行。

const formattedText = responseText.replace(/\n/g, "<br>");
textElement.innerHTML = formattedText;

4. 使用 <pre> 标签

如果希望完全保留文本的格式（包括空格和换行符），可以将文本放在 <pre> 标签中。

textElement.innerHTML = `<pre>${responseText}</pre>`;

总结