flex布局子元素元素不换行，且超出部分省略号展示

.punchCard-bottomArea{

display: flex;

justify-content:space-around;

background-color: white;

flex-direction: row;

height: 200rpx;

white-space:nowrap;//不换行

}

.punchCard-content{

margin:5rpx 10rpx 0 10rpx;

width: 250px;

overflow: hidden;//禁止内容溢出

text-overflow: ellipsis;//省略号

}

<view class="punchCard-bottomArea">

   <image src="{{type===0?'../image/yichang_sel.png':'../image/zhengchang_sel.png'}}" mode="widthFix" style="width: 50rpx;"/>

      <text class="punchCard-content">{{content}}</text>

      <text style="margin-top:5rpx;color:#008fd4;" onTap="getLocation">重新定位</text>

</view>