uni-app 更新IDE后text组件的space属性异常

uni-app 更新IDE后text组件的space属性异常

类别 信息
产品分类 uniapp/App
PC开发环境 Mac
PC版本号 26.0.1 (25A362)
HBuilderX 正式
HBuilderX版本 4.86
手机系统 iOS
手机版本号 iOS 18
手机厂商 苹果
手机机型 iPhone15
页面类型 vue
vue版本 vue2
打包方式 离线
项目创建方式 HBuilderX

示例代码：

<text space="nbsp" v-for="(item, contentIndex) in chapterContentItemList[chapterIndex]"  
key="contentIndex"
class="[chapterIndex == currentChapterIndex ? 'chapter-view-content-item-transition' : '', projectSystemLanguage == 'zh' ? 'chapter-view-content-zh' : '']"
style="((chapterIndex == currentChapterIndex && item.index < currentPlayWordIndex) || chapterIndex < currentChapterIndex || playStatus == 'pause' || playStatus == 'stop') ? 'color:' + srtContentColor : 'color:' + srtContentUnreadColor">
    {{ item.text === ' ' ? '\u00A0' : item.text }}
</text>  

.chapter-view-content-srt {
margin-top: 30rpx;
margin-bottom: 80rpx;
font-size: 35rpx;
line-height: 50rpx;
font-family: 'IOS-Roman';
color: #a9a9a9;
// white-space: pre-wrap;
display: flex;
flex-wrap: wrap;
}

操作步骤：

  • 渲染异常，每个字符前后多了空格

预期结果：

  • 渲染异常，每个字符前后无空格

实际结果：

  • 渲染异常，每个字符前后多了空格

bug描述：

更新 HBuilder X 4.85 或 4.84 后，text 组件的 space 属性异常，抓紧修复一下！！！！ 每个 text 的前面都被带上了空格！！！


更多关于uni-app 更新IDE后text组件的space属性异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 更新IDE后text组件的space属性异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是HBuilderX 4.86版本中text组件的space属性解析bug。从你的代码分析，问题出现在space="nbsp"的解析上，该属性在当前版本被错误地解析为每个字符前后都添加了空格。

临时解决方案：

  1. 移除space属性：将space="nbsp"从text组件中删除
<text v-for="(item, contentIndex) in chapterContentItemList[chapterIndex]"  
key="contentIndex"
class="[chapterIndex == currentChapterIndex ? 'chapter-view-content-item-transition' : '', projectSystemLanguage == 'zh' ? 'chapter-view-content-zh' : '']"
style="((chapterIndex == currentChapterIndex && item.index < currentPlayWordIndex) || chapterIndex < currentChapterIndex || playStatus == 'pause' || playStatus == 'stop') ? 'color:' + srtContentColor : 'color:' + srtContentUnreadColor">
    {{ item.text === ' ' ? '\u00A0' : item.text }}
</text>
  1. 使用CSS控制间距：通过CSS的letter-spacing属性替代
.chapter-view-content-srt {
    margin-top: 30rpx;
    margin-bottom: 80rpx;
    font-size: 35rpx;
    line-height: 50rpx;
    font-family: 'IOS-Roman';
    color: #a9a9a9;
    display: flex;
    flex-wrap: wrap;
    letter-spacing: 0.5rpx; /* 根据需要调整 */
}
回到顶部