支付宝小程序渲染结果被强制换行

Question

以下渲染结果横向滚动，不隐藏，微信小程序可以正常显示，支付宝小程序渲染结果被强制换行

<view class="total scroll-left" >
            最新下单<text v-for="(item,index) in latestAddress" :key="index">
             <text v-if="index === 0 || item.real_name !== latestAddress[index - 1].real_name">
            {{ displayRegion(item.region) }}-{{item.real_name}},
            </text></text>早下单早服务哦，快来下单吧！
        </view>
.total{
        font-size: 30rpx;
        color:#ff4500;
        padding: 15rpx 40rpx;
        display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
    }
    @keyframes scroll-right  {
      0% {
        transform: translateX(-100%);
      }
      100% {
        transform: translateX(100%);
      }
    }
    
    .scroll-left {
      white-space: nowrap;
    /*  overflow: hidden; */
      animation: scroll-right  20s linear infinite;
      border: 0 20rpx;
    }

微信小程序

支付宝小程序

Answer 1

【相关推荐】

• 这有个类似的问题, 你可以参考下: https://ask.csdn.net/questions/7573255
• 这篇博客也不错, 你可以看下微信小程序与支付宝小程序使用模板消息步骤与踩坑
• 您还可以看一下 黄菊华老师的微信小程序在线点餐外卖系统 毕业设计 课程设计 课程中的 资讯功能和用户注册登录功能小节, 巩固相关知识点
  
• 除此之外, 这篇博客: 【微信小程序】微信小程序入门与实战小项目笔记中的 解决最后一排数量不够自动向两端排列问题 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

  可以通过:after解决，只适合每列有3个的分布情况

  .tem-flex:after{
      content: '';
      width: 200rpx; /* 一项数据的宽度 */
    }
  

  其他解决方案点击

  这里查看

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^