html 超出部分显示省略号

省略号.png

wxss

/*显示一行 超出部分... */
.text-over-ell{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/**文本两端对齐*/
.text-lr-align{
  overflow: auto;
  text-align:justify; 
  text-justify:inter-ideograph;
}

wxml text-over-ell

<view class="tl-flex2" style="width:430rpx;height:166rpx;margin-left: 24rpx">
                <view class="tl-title-14 text-over-ell">{{item.desc}}</view>
                <view class="tl-title-9">[{{item.pay_way_name}}]</view>
                <view class="tl-title-11">原价:￥{{item.price}} <text class="tl-title-12">会员价:￥{{item.actual_price}}</text></view>
            </view>