①想让商品标题接着楼号后面写，写不下的部分再换行写 ②想让垂直方向上商品能够首尾相连

Question

问题遇到的现象和发生背景

①我想让商品标题接着楼号后面写，然后写不下的部分再换行写
②想让不同的商品在垂直方向上首尾相连

我的解答思路和尝试过的方法

1.之前尝试用word break让标题断行但是没成功
2.完全没主意，不知道怎么才能让垂直方向商品首尾相连

<view class="vbig"><!-- 总区域 -->

  <view class="list" wx:for="{{list}}" wx:key="_id"><!-- 循环渲染每个商品组合 -->

    <image src='{{item.img1}}' mode="aspectFill" class="img1-img"></image><!-- 商品图片 -->
  
    <view class="titlegroup"><!-- 颜色标签和商品标题区域 -->
      <view class="tradeway" wx:if="{{item.tradeway}}">{{item.tradeway}}</view><!-- 送货上门标签 -->
      <view class="{{item.stubudidx==1? 'girlbud':item.stubudidx==2? 'girlbud':item.stubudidx==3? 'boybud':item.stubudidx==4? 'boybud':item.stubudidx==5? 'girlbud':item.stubudidx==6? 'girlbud':item.stubudidx==7? 'girlboybud':'boyboybud'}}">{{item.stubud}}</view>
      <!-- 控制楼号标签的不同样式 -->
      <view class="title">{{item.title}}</view><!-- 商品标题 -->
    </view>

.vbig{
  width: 690rpx;
  margin: 30rpx;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}/* 总区域 */
.list{
width: 335rpx;
margin-bottom: 40rpx;
}/* 循环渲染每个商品组合 */
.tradeway{
  background-color: #FFD700;
  width: 90rpx;
  height: 32rpx;
  border-radius: 8rpx;
  font-size: 20rpx;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  color:white;
}/* 送货上门标签 */
.title{
  font-size: 28rpx;
  font-weight: bold;
}/* 商品标题 */

Answer 1

1、给titlegroup用flex布局

.titlegroup{display:flex}

2、用瀑布流