前端换行显示问题的排查与解决

既然确认后端接收到的 userText 中包含换行符（ ），而页面渲染时却显示为密密麻麻的一坨，说明问题出在 HTML 解析规则 上。这是 Web 开发中非常经典的问题：

1. 核心原因：HTML 的默认表现

HTML 不会将纯文本中的 自动渲染为 <br> 标签。即使你在 <div> 内部填入了带有换行符的文本，浏览器也会将其视为普通的空白符并忽略掉，导致所有文字堆叠在一起。

2. 解决方案：修改 CSS 样式

最直接的方法是通过 CSS 控制元素如何处理空白符。请给承载消息的 div 容器添加以下样式：

.message-bubble {
  /* 关键点：保留空白符序列，并且在文本超出时自动换行 */
  white-space: pre-wrap;
  /* 或者使用 pre-line，它会合并多余空格，但保留换行 */
}

pre-wrap 的效果：它会尊重你字符串里的 ，同时在文字较多时会自动换行，完美解决“挤在一起”的问题。

3. Markdown 的特殊性

如果你使用了 marked.js 等 Markdown 解析器，它们通常默认遵循 Markdown 规范：单个换行符会被忽略，必须输入两个空格加回车，或者两个换行符才能触发解析为 <br> 或 <p>。

• 如果你想让单换行直接生效，可以在解析 Markdown 时开启 breaks: true 配置：

  marked.setOptions({ breaks: true });
  

总结建议

1. 检查 CSS：在你的 appendMessage 函数生成的 HTML 容器上，务必加上 white-space: pre-wrap;。
2. 检查 Markdown 配置：如果使用了 marked 渲染，请务必开启 breaks: true，这样输入一次回车就会被识别为换行。

只要这两步做好，不管你数据库存的是 还是 `

`，前端都能正常显示出分行效果。