uni-app代码编译成微信小程序代码时 text标签内 消失 导致空格无法正常渲染

uni-app代码编译成微信小程序代码时 text标签内 消失 导致空格无法正常渲染

开发环境 版本号 项目创建方式
Windows Windows 10 HBuilderX
19045.4046
HBuilderX 4.01
第三方开发者工具 4.01.2024020211-alpha
基础库 3.3.4

示例代码：

<view class="paragraph-topic">  
  <text>{{ paragraph.topic.serialNum }}.</text>  
  <text space="ensp" :decode="true">&nbsp; </text>  
  <text style="text-decoration: underline" space="ensp" :decode="true">&nbsp;&nbsp;&nbsp;</text>  
</view>

操作步骤：

将以下的uniapp代码编译成微信小程序代码

<view class="paragraph-topic">  
  <text>{{ paragraph.topic.serialNum }}.</text>  
  <text space="ensp" :decode="true">&nbsp; </text>  
  <text style="text-decoration: underline" space="ensp" :decode="true">&nbsp;&nbsp;&nbsp;</text>  
</view>

预期结果：

编译后的代码：

<view class="paragraph-topic data-v-847711d4"><text class="data-v-847711d4">{{paragraph.topic.serialNum+"."}}</text><text space="ensp" decode="{{true}}" class="data-v-847711d4">&nbsp; </text><text style="text-decoration:underline;" space="ensp" decode="{{true}}" class="data-v-847711d4">&nbsp; &nbsp; &nbsp;</text></view>

实际结果：

<view class="paragraph-topic data-v-847711d4"><text class="data-v-847711d4">{{paragraph.topic.serialNum+"."}}</text><text space="ensp" decode="{{true}}" class="data-v-847711d4"></text><text style="text-decoration:underline;" space="ensp" decode="{{true}}" class="data-v-847711d4"></text></view>

更多关于uni-app代码编译成微信小程序代码时 text标签内&nbsp;消失 导致空格无法正常渲染的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

可能整个 是专属，小程序不适用吧，使用css隔开也行啊

更多关于uni-app代码编译成微信小程序代码时 text标签内&nbsp;消失 导致空格无法正常渲染的实战教程也可以访问 https://www.itying.com/category-93-b0.html


小程序是支持   的，css隔开不行，因为需要空格的文本下划线

在 uni-app 中，<text> 标签内的 &nbsp; 被编译成微信小程序代码时可能会被忽略，导致空格无法正常渲染。这是因为微信小程序的 <text> 标签对 HTML 实体字符的处理方式与浏览器不同。

解决方案

  1. 使用 Unicode 空格字符： 你可以使用 Unicode 的空格字符 \u00A0 来代替 &nbsp;。这个字符在微信小程序中可以被正确渲染。

    <text>第一行\u00A0第二行</text>

  2. 使用 <span> 标签： 在 uni-app 中，<span> 标签在编译成微信小程序时会自动转换为 <text> 标签，并且可以保留 &nbsp;。

    <span>第一行&nbsp;第二行</span>

  3. 使用 CSS 控制间距： 如果你只是需要控制文本之间的间距，可以使用 CSS 的 margin 或 padding 来实现。

    <view class="text-container">
  <text>第一行</text>
  <text>第二行</text>
</view>

<style>
.text-container text {
  margin-right: 10px; /* 根据需要调整间距 */
}
</style>

  4. 使用 实体字符： 在某些情况下，直接使用 实体字符也可以在微信小程序中生效。

    <text>第一行 第二行</text>
回到顶部