在微信小程序開發中，我們經常會使用   來表示一個空格。這是因為在 HTML 中，空格會被解析為一個普通字符，而不會產生實際的空白間距。而   是一種特殊的字符實體，它被解析為一個不可見的空格，可以在頁面上產生真正的空白間距。但是會遇到   空格不生效的問題，本文將介紹解決方法。

問題復現

以下代碼在微信小程序中運行，會發現   空格不生效，會把   這幾個字符原原本本的顯示出來。

<view>這是一行文本 &nbsp;&nbsp;&nbsp;&nbsp; 這里需要展示四個空格</view>

解決方法

將 view 組件換成 text 組件，并加上屬性：decode="true" 即可解決問題。

<text decode="true">這是一行文本 &nbsp;&nbsp;&nbsp;&nbsp; 這里需要展示四個空格</text>

Bug & Tip

1. tip: decode可以解析的有   < > & '    
2. tip: 各個操作系統的空格標準并不一致。
3. tip: text 組件內只支持 text 嵌套。
4. tip: 除了文本節點以外的其他節點都無法長按選中。
5. bug: 基礎庫版本低于 2.1.0 時， text 組件內嵌的 text style 設置可能不會生效。

參考文檔：https://developers.weixin.qq.com/miniprogram/dev/component/text.html

---

歡迎訪問：天問博客