uniapp 富文本没有换行怎么解决

在使用uniapp开发时，富文本内容显示没有换行效果怎么办？HTML代码中的<br>标签和\n换行符都不起作用，文本全部连在一起显示。请问如何让富文本内容正常换行显示？

2 回复

uniapp富文本换行问题，可以这样解决：

  1. 使用\n或<br>标签
  2. 设置CSS样式：white-space: pre-line
  3. 用<p>标签包裹内容
  4. 使用rich-text组件的nodes属性

推荐方法：将内容用<p>标签包裹，并设置CSS样式。


在 UniApp 中，富文本组件（<rich-text>）默认不显示换行符（如 \n），因为 HTML 规范中换行符会被忽略。以下是几种解决方法：

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

在渲染前，将文本中的 \n 替换为 <br> 标签，使富文本正确识别换行。

示例代码：

// 在数据中处理文本
data() {
  return {
    content: "第一行\n第二行\n第三行"
  };
},
computed: {
  formattedContent() {
    return this.content.replace(/\n/g, '<br>');
  }
}

<!-- 在模板中使用富文本 -->
<rich-text :nodes="formattedContent"></rich-text>

2. 使用 white-space: pre-line 样式（部分平台支持）

通过 CSS 设置富文本容器样式，保留换行符。

示例代码：

<view class="rich-text-container">
  <rich-text :nodes="content"></rich-text>
</view>

.rich-text-container {
  white-space: pre-line;
}

3. 处理 HTML 实体（如从接口获取的数据）

如果富文本内容包含 HTML 实体（如 &nbsp;），需确保正确解析。

示例代码：

// 使用 decodeHTML 函数（可自行实现或使用库）
decodeHTML(html) {
  const textarea = document.createElement('textarea');
  textarea.innerHTML = html;
  return textarea.value;
}
// 在数据中应用
this.content = this.decodeHTML("第一行&nbsp;第二行");

注意事项：

  • 平台差异：某些 CSS 样式（如 white-space）在小程序端可能不支持，建议优先使用 <br> 替换方法。
  • 安全性：如果富文本内容来自用户输入，注意防范 XSS 攻击，避免直接渲染未过滤的 HTML。

选择适合场景的方法即可解决换行问题。

回到顶部