微信小程序踩坑（1）：wx.showModal模态对话框中content换行

最新推荐文章于 2025-06-12 14:36:32 发布

IT实战联盟Lin

最新推荐文章于 2025-06-12 14:36:32 发布

阅读量1.4w

点赞数 6

CC 4.0 BY-SA版权

分类专栏：互联网技术移动开发小程序实战文章标签：小程序 wx.showModal wx.showModal换行小程序踩坑小程序总结

本文链接：https://blog.csdn.net/zhenghhgz/article/details/84636307

互联网技术同时被 3 个专栏收录

134 篇文章

订阅专栏

移动开发

50 篇文章

订阅专栏

小程序实战

39 篇文章

订阅专栏

本文介绍了一种在微信小程序的wx.showModal对话框中实现内容换行的方法，通过使用' '实现文本换行，解决了对话框内容显示的需求。在微信开发者工具中可能无法预览换行效果，但在真机上可以正常显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题：wx.showModal 对话框内容不能换行？

开发体验.jpg

如上图所示，模态对话框中content是没有换行的，但是我们需求中有需要换行提醒的业务，那怎么办呢？官方API中并没有告诉我们怎么做！

解决方案：使用“\r\n”换行

源码

wx.showModal({
      title: 'showModal换行',
      content: '姓名：JIM\r\n性别：女\r\n国籍：中国',
      success(res) {
        if (res.confirm) {
          console.log('用户点击确定')
        } else if (res.cancel) {
          console.log('用户点击取消')
        }
      }
    })

但是，如果你在微信开发者工具中发现并没有换行，不要惊讶，利用真机预览一下，就可以看到效果了。

真机体验.jpg