赞
踩
需求:商品标题部分超出两行显示… 且当点击编辑显示选择按钮后,文字区域宽度变小后,文字不能溢出。
如图:
HTML代码
<!-- 收藏 --> <view class="goodsBox" v-if="type === 'favorite'" @tap="jump('/pageGoods/detail/index', { id: detail.id })"> <view class="img"> <image class="goodsImg" :src="detail.goods_image" mode=""></image> </view> <view class="goodsLeft"> <view class="goodsLeftTitle f14 more-t" > {{ detail.goods_sku_text }} </view> <view class="collectionNum">{{ detail.collectionNum>10000?parseInt(detail.collectionNum/10000)+'万+':detail.collectionNum }}人收藏</view> <view style="display: flex;flex-flow: row nowrap;"> <view class="price c1" style="font-size: 24rpx;" :style="detail.depreciate==0?'flex:1;':''">¥{{ detail.goods_price.toFixed(2) }}</view> <view style="flex: 1;" class="c1 f12 ml8" v-show="detail.depreciate"> 距加入降¥{{detail.depreciate}}</view> <view class="x-c"> <view class="box_label br16 bor c1 x-c f12">购买</view></view> </view> </view> </view>
.goodsBox { display: flex; .img { width: 170rpx; height: 170rpx; .goodsImg { width: 170rpx; height: 170rpx; border-radius: 10rpx; background-color: #ccc; } } .goodsLeft { flex: 1; margin-left: 10rpx; .goodsLeftTitle { overflow: hidden; text-overflow: ellipsis; } .f14 { font-size: 14px; } /*多行文本溢出省略号*/ .more-t { overflow: hidden;// 超出的文本隐藏 text-overflow: ellipsis;// 溢出用省略号显示 display: -webkit-box;// 将对象作为弹性伸缩盒子模型显示。 -webkit-line-clamp: 2;// 这个属性不是css的规范属性,需要组合上面两个属性,表示显示的行数。 -webkit-box-orient: vertical;// 从上到下垂直排列子元素(设置伸缩盒子的子元素排列方式) transition: all linear 0.2s; } .collectionNum { margin: 10rpx 0; color: #a6a6a6; font-size: 24rpx; } .c1{ color: rgba(255, 57, 51, 1) !important; } .f12 { font-size: 12px; } .ml8 { margin-left: 8px; } .bor{ border: 1rpx solid rgba(255, 57, 51, 1); } .br16{ border-radius: 32rpx; } .box_label{ width: 106rpx; height: 40rpx; } /*上下左右居中*/ .x-c { display: flex; justify-content: center; align-items: center; } .price { color: #e1212b; font-size: 32rpx; font-family: PingFang SC; font-weight: 600; } } }
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。