uni-app中过滤器无法处理换行符,因text和view不解析HTML,rich-text虽可解析但需合法HTML字符串且不支持内联样式;推荐用replace转<br/>后配合rich-text,或用white-space:pre-wrap实现轻量换行。

uni-app中过滤器无法处理换行符的真相
直接写 Vue 过滤器(filters)把
替换成 <br> 是无效的——因为 uni-app 的 <text> 组件不解析 HTML 标签,<view> 也不支持内联 HTML;哪怕你返回了字符串 "a<br>b",它只会原样显示为文字,不会换行。
为什么不能用 v-html 或过滤器渲染 <br>
uni-app 的所有平台(小程序/H5/App)都不支持 v-html 指令;<rich-text> 虽然能解析 HTML,但它的内容必须是合法的、结构完整的 HTML 字符串,且不接受用户自定义样式(如内联 style)。常见错误包括:
- 在
<rich-text>中传入纯文本 +<br>(比如"hello<br>world")——可以换行,但一旦含中文或特殊符号,容易因编码/转义问题崩掉 - 用过滤器返回带
<br>的字符串,再塞进<text>——<text>当成普通字符显示,不解析 - 在 H5 端误以为可用
v-html,结果编译报错或白屏
真正可行的替换方案:用 replace + <rich-text>
这是目前最稳定、跨端兼容的做法。核心逻辑是:在 JS 层把接口返回的
和
统一替换成 <br/>,再交给 <rich-text> 渲染。
- 后端返回的是字面量
\n(JSON 转义后),需先.replace(/\n/g, ' ')还原成真实换行符 - 再统一替换换行符:
.replace(/ /g, '<br/>').replace(/ /g, '')(兼容 Windows 的) -
<rich-text>的nodes属性不推荐用(小程序端对数组节点支持不稳定),坚持用nodes字符串形式 - 避免在字符串里拼接用户输入内容,防止 XSS;若内容不可信,需额外做 HTML 实体转义(如
&→&)
// 示例:在 API 响应后处理 this.contentHtml = res.data.text .replace(/\n/g, ' ') .replace(/ /g, '<br/>') .replace(/ /g, '');
更轻量替代:CSS white-space: pre-wrap 不用改数据
如果只是想让换行符生效,且不需要加粗、颜色等富文本能力,white-space: pre-wrap 是首选。它不依赖数据格式,也不引入 <rich-text> 的兼容性风险。
- 必须作用于
<text>或<view>,且该元素不能设flex-shrink: 0(否则会撑容器) - 搭配
word-break: break-word防止长英文/数字不换行溢出 - 注意:
<text>默认white-space: nowrap,不显式设置就一定不换行 - H5 端可额外加
overflow-wrap: break-word提升兼容性
.multiline {
white-space: pre-wrap;
word-break: break-word;
}
真正麻烦的不是怎么换行,而是不同平台对同一段文本的解析粒度不一致——比如 iOS 微信基础库 2.28+ 支持 pre-wrap 完整语义,而某些安卓低端机仍会吞掉首尾空白。所以,别只测一个平台,真机调试时至少覆盖 iOS 微信、Android 微信、H5 三端。


















