微信小程序中換行,空格(多個空格)寫法

在HTML5中我們都知道編輯文檔換行的時候直接用<br>就可以了，但在wxml中卻識別不了<br>標簽。

空格，換行在小程序中的寫法整理如下：

必須在<text>標簽中！

一、空格

js:

Page({
　　data: {
　　　　text0: '這是一個段落 \n 看我變身換行',
　　　　text1:'這是一個段落 看我空格',
　　},
})

wxml:

<view>
  <text>這是一個段落 \n 看我變身換行</text>
</view>
<view>
  <text>{{text0}}</text>
</view>

二、空格及連續空格

<view>
 <text style="white-space:pre-wrap">{{text1}} ———— white-space:pre-wrap 文本保留空格和回車</text>
</view>
<view>
 <text>這是一個段落\t\t\t\t\t\t看我空格（ 多個只會顯示一個空格） </text>
</view>
<view>
    <text decode="{{true}}">我要&ensp;開始&ensp;&ensp;&ensp;空格了（空格是中文字符一半大小）</text>
</view>
<view>
    <text decode="{{true}}">我要&emsp;開始&emsp;&emsp;&emsp;空格了（空格是中文字符大小）</text>
</view>
<view>
    <text decode="{{true}}">我要&nbsp;開始&nbsp;&nbsp;&nbsp;空格了（空格根據字體設置）</text>
</view>

后台傳入的富文本換行，在富文本中 \n 會被當做字符串處理，只有在js文件中寫入 \n，才能被正確轉義實現換行。