使用说明超出一行出现向下的 iconfont ,超出的文字用省略号代替, 点击iconfont 后,箭头向上,使用说明全部展示不出现省略号。效果如下
<div class="tips item_b">
<span class="text" :class="{ nowrap: isFold}" style="width:5.34rem;" >
使用说明:盒马生鲜全场使用,满30元立减15元
使用说明:盒马生鲜全场使用,满30元立减15元
使用说明:盒马生鲜全场使用,满30元立减15元
使用说明:盒马生鲜全场使用,满30元立减15元
</span>
<span
class="iconfont iconxiala"
style="color:#CCCCCC;font-size:.32rem;"
:style="'transform:rotate('+ arrowRotate+'deg)'"
@click="foldCoupon"></span>
</div>
foldCoupon(){
this.arrowRotate = this.arrowRotate==180?0:180;
this.isFold = !this.isFold
},
.nowrap{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.item_b{
background: #fff;
padding: 0.14rem 0.3rem;
display: flex;
position: relative;
transition: 0.5s;
border-bottom-left-radius: 0.1rem !important;
border-bottom-right-radius: 0.1rem !important;
.iconfont{
transition: 0.5s;
position: absolute;
right: 0.24rem;
}
}