文字长显示...-webkit-line-clamp

最新推荐文章于 2024-01-29 14:43:38 发布

不想努力的迪迪

最新推荐文章于 2024-01-29 14:43:38 发布

阅读量140

点赞数

文章标签： servlet java 数据库

本文链接：https://blog.csdn.net/weixin_48341937/article/details/126744863

版权

<view class="commodity">
       
       <view class="commodity-item">
           <image class="commodity-img" src='../../static/img/commodity1.jpg'></image>
           <view class="commodity-content">
               <text class="commodity-name">羽绒服爆款2022，不买不行啊，爆款1111绒服爆款2022，不买不行啊，爆款1111</text>
               <view class="">
                   <text class="pprice">￥299</text>
                   <text class="oprice">￥659</text>
               </view>
               <text class="discount">5.2折</text>
           </view>
       </view>
       <view class="commodity-item">
           <image class="commodity-img" src='../../static/img/commodity2.jpg'></image>
           <view class="commodity-content">
               <text class="commodity-name">羽绒服爆款2022，不买不行啊，爆款1111绒服爆款2022，不买不行啊，爆款1111</text>
               <view class="">
                   <text class="pprice">￥299</text>
                   <text class="oprice">￥659</text>
               </view>
               <text class="discount">5.2折</text>
           </view>
       </view>
   </view>

<style scoped>
   .commodity {
       display: flex;
       flex-wrap: wrap;
       /* 该样式用于设置换行。 */
   }

   .commodity-item {
       width: 375rpx;
       padding-bottom: 20rpx;
   }

   .commodity-img {
       height: 375rpx;
       width: 100%;
   }

   .commodity-content {
       text-align: center;
   }

   .commodity-name {
       /* 文字超出显示... */
       overflow: hidden;
       text-overflow: ellipsis;
       display: -webkit-box;
       -webkit-line-clamp: 2;
       -webkit-box-orient: vertical;
       color: #333333;
       word-break: break-all;
       padding: 6rpx 20rpx;
   }
   .oprice{
       /* 原价 */
       text-decoration: line-through;//定义穿过文本下的一条线。
       font-size: 24rpx;
       color: #999999;
   }
   .discount{
       /* 折扣 */
       border-radius: 4rpx;
       border: 2rpx solid #FF3333;
       padding: 2rpx 10rpx;
       font-size: 20rpx;
       color: #FF3333;
   }
</style>