vue3中uni-app的uni.showToast中title为英文单词希望不要拆分

vue3中uni-app的uni.showToast中title为英文单词希望不要拆分

示例代码：

uni.showToast({  
     title: 'You haves already received this coupon!',  
     icon: "none",  
    duration: 2000,  
});

操作步骤：

在vue3中showToast：You haves already received this coupon!，received单词会被分割

预期结果：

在vue3中showToast：You haves already received this coupon!，单词不被分割

实际结果：

在vue3中showToast：You haves already received this coupon!，received单词会被分割

bug描述：

vue3 中uni.showToast中title为英文单词会被拆分，vue2中正常

Image

开发环境 版本号 项目创建方式
Mac 15.1 HBuilderX
Chrome 135.0.7049.42 -

更多关于vue3中uni-app的uni.showToast中title为英文单词希望不要拆分的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

感谢反馈，问题已复现，已加分

更多关于vue3中uni-app的uni.showToast中title为英文单词希望不要拆分的实战教程也可以访问 https://www.itying.com/category-93-b0.html


临时解决方案
替换 /Applications/HBuilderX-Dev.app/Contents/HBuilderX/plugins/uniapp-cli-vite/node_modules/@dcloudio/uni-h5/style/api/toast.css 文件为附件的文件

收到，谢谢！

这是一个已知的uni-app在Vue3环境下的样式问题。英文单词在toast提示中被强制换行分割。

解决方案可以尝试以下两种方式：

  1. 添加CSS样式强制不换行：
/* 在App.vue的全局样式中添加 */
.uni-toast {
  word-break: keep-all !important;
  white-space: nowrap !important;
}
  1. 或者使用\n手动控制换行位置：
uni.showToast({  
  title: 'You haves already\nreceived this coupon!',  
  icon: "none",  
  duration: 2000  
});
回到顶部