在微信小程序里处理换行，可能是很多开发者初期都会遇到的一个“小坑”。你可能会发现，在HTML里用得好好的
标签，到了小程序的text或view组件里，直接写上去它就是不换行，甚至直接把标签当作普通文本显示出来。这背后其实是因为小程序的渲染机制和网页不太一样，它不直接支持HTML标签，而是用自己的一套组件系统和rich-text富文本组件来解析。今天咱们就把这个问题彻底聊透，不光告诉你“怎么做”，还让你理解“为什么这么做”，以后遇到类似场景能自己判断。

一、最直接的解决方案：用 rich-text 组件解析 HTML 换行标签

如果你手头有一段包含
标签的文本，比如从接口返回的富文本内容，最简单的办法就是用rich-text组件。这个组件专门用来解析 HTML 字符串，支持常见的标签，包括
、

、等。

用法示例：

<rich-text nodes="<br/>"></rich-text>

或者动态绑定一个包含
的字符串：

<rich-text nodes="{{htmlContent}}"></rich-text>

在Page的data里，htmlContent: '第一行<br/>第二行'，这样就能看到两行文字了。

需要留意的是，rich-text的nodes属性可以是字符串，也可以是节点数组。字符串形式下，小程序内部会帮你解析。但有一个关键点：rich-text默认会过滤掉一些标签和属性，比如style、class，甚至某些版本的img标签可能不生效。如果你只是单纯为了换行，用<br/>是没问题的。

不过，rich-text有一个“副作用”：它会把整个字符串当作HTML解析，如果内容里包含<script>或<iframe>这类危险标签，小程序会自动过滤掉，安全性倒是不用担心。但如果你只有一段纯文本，只是想在中间某处换行，用rich-text有点“杀鸡用牛刀”了，因为它会引入额外的解析开销。这时候可以看看下面的方法。

二、纯文本场景：用 \n 换行符配合 text 组件的 decode 属性

很多开发者容易忽略text组件的一个属性：decode。当这个属性设置为true时，text组件会解析一些特殊字符，比如 （空格）、<（小于号），以及\n（换行符）。没错，\n在decode开启后，会被渲染成真正的换行。

具体做法：

<text decode="{{true}}">第一行\n第二行</text>

注意，这里的\n在WXML里必须写成\n这个字符串，而不是真正的回车。如果你在data里定义变量，比如text: '第一行\n第二行'，那么data里的\n就是一个转义字符，绑定到text组件后，配合decode就能换行。

不过有个小细节：text组件的decode属性只对 、<、>、'、"以及\n这几个有效。而且，\n必须是小写字母n，不能是\r\n或\N。如果你在Windows系统下编辑代码，换行符可能是\r\n，这时需要手动替换成\n，否则text组件可能只识别\n，把\r当作普通字符显示出来。

这个方法适合纯文本展示，比如用户输入的留言、商品描述里的简单分段。但如果你要展示的文本里既有换行又有加粗、链接等复杂格式，那就得回到rich-text或者用wxml模板循环渲染了。

三、更灵活的方式：用 view 组件加 flex 布局模拟换行

有时候，你需要的不是文本内部的换行，而是多个块级元素之间的换行。比如，展示一个地址：省、市、区各占一行。这时候用view组件配合flex布局的flex-wrap: wrap，或者直接用display: block让每个view独占一行，比用rich-text更可控。

举个例子：

<view>

<view>北京市</view>

<view>海淀区</view>

<view>中关村大街</view>

</view>

这样每个view默认就是独占一行的，不需要任何换行标签。如果你想让它们在一行里换行，比如宽度不够时自动折行，可以给外层view加display: flex; flex-wrap: wrap;，内层view加display: inline-block或flex-shrink: 0。

这种方式的优势是：样式完全由你控制，想加间距、颜色、边框都方便。而且没有rich-text的解析限制，也不受text组件decode属性的字符限制。缺点就是需要手动拆分数据，把一段文本按换行位置拆成数组，然后用wx:for循环渲染。比如：

data: { lines: ['第一行', '第二行', '第三行'] }

<view wx:for="{{lines}}" wx:key="index">{{item}}</view>

这样每一行就是一个独立的view，天然换行。

四、容易被忽略的坑：CSS white-space 属性的妙用

有时候你发现\n在text组件里不换行，或者rich-text解析后没有换行，可能是因为white-space属性在作怪。小程序的text组件默认white-space: normal，这意味着连续的空白字符会被合并成一个空格，换行符也不例外。所以，即使你写了\n，如果white-space是normal，它也不会换行。

解决办法：给text组件加上style="white-space: pre-line;"或style="white-space: pre-wrap;"。这两个值的区别是：pre-line会合并连续的空格，但保留换行符；pre-wrap会保留所有空白字符和换行符。如果你只是想要换行，用pre-line就够了。注意，这个属性在view组件上也有效，但view默认是display: block，本身就会换行，所以通常不需要。

举个实际案例：你从后端拿到一段文本，里面用\n分隔了段落，但你用text组件直接绑定后，所有文字挤在一起。这时候，加上white-space: pre-line，问题就解决了，根本不需要用rich-text。这个技巧在展示用户评论、文章摘要时特别有用。

五、对比总结：什么时候该用哪种方法？

为了让你以后遇到类似问题能快速决策，我结合具体场景做个对比：

场景一：你有一个固定格式的提示文本，比如“请输入用户名\n密码不能为空”，且不需要任何样式。用text组件加decode属性最简单，代码量最少。

场景二：你从接口获取了一段HTML，里面包含<br>、<p>、<img>等标签。用rich-text直接解析，省去自己拆分的麻烦。但要注意rich-text不支持所有HTML标签，比如<table>就可能无法正常渲染，这时需要考虑用web-view组件加载一个HTML页面，或者用第三方解析库。

场景三：你需要展示多行数据，每行可能有独立的样式（比如颜色、字号不同），或者需要绑定点击事件。用view加wx:for循环渲染，每行作为一个独立节点，灵活度最高。比如聊天记录里的每条消息，或者列表里的每个条目。

场景四：你有一段纯文本，但不想用text组件（因为text组件对长文本的渲染性能不如view），又不想用rich-text。可以给view组件设置white-space: pre-line或pre-wrap，然后直接把包含\n的文本放进去，效果和text组件一样，但性能更好。

六、一个完整的实战例子：用户地址换行展示

假设你要展示一个用户地址，格式是“省份+城市+区+详细地址”，每个字段占一行。数据从接口返回时是一个字符串，用“|”分隔。你希望在小程序里展示成：

广东省

深圳市

南山区

科技园南区A栋

你可以这样做：

1. 在data里定义：address: '广东省|深圳市|南山区|科技园南区A栋'

2. 在js里处理：let lines = this.data.address.split('|'); this.setData({ addressLines: lines });

3. 在wxml里：

<view wx:for="{{addressLines}}" wx:key="index" style="padding: 4px 0;">{{item}}</view>

这样每行就是一个独立的view，你可以给每一行加不同的样式，比如第一行加粗，最后一行颜色变灰。如果直接用rich-text把“|”替换成<br/>，虽然也能换行，但无法单独控制每行的样式。

七、扩展：关于换行和文本截断的冲突

有时候你既要换行，又要限制行数（比如最多显示两行，超出部分用省略号）。这在view组件里可以用display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;实现。但要注意，这个属性在<