美文网首页
flex布局最后一列,文字撑满换行

flex布局最后一列,文字撑满换行

作者: 今天天气很好我心情也很好 | 来源:发表于2021-04-22 15:03 被阅读0次

overflow: hidden;

    word-break: break-all;

    text-overflow: ellipsis;

    display: -webkit-box;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 1;

下面是使用

.one-line-title{

    overflow: hidden;

    word-break: break-all;

    text-overflow: ellipsis;

    display: -webkit-box;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 1;

}

.order-item {

display: flex;

width: calc(100%);

background-color: #ffffff;

align-items: center;

padding-left: 12px;

padding-right: 8px;

margin-bottom: 25px;

}

<view class="order-item" v-for="(item, index) in flowList" :key="index">

<u-checkbox @change="checkboxChange" shape="circle" active-color="#D2A36C" v-model="item.checked">

</u-checkbox>

<view style="margin-start:9px; width: 80px;height: 80px">

<image :src="item.image" style="width: 80px;height: 80px" :index="index"></image>

</view>

<view style="margin-left: 10px;">

<view class="one-line-title">{{ item.description }}</view>

<view class="sku-layout">

<view class="sku-title">颜色:红色  尺寸:L</view>

<view class="money">¥138.00</view>

</view>

<view class="sku-layout">

<view class="delivery">未发货</view>

<view class="num">x1</view>

</view>

</view>

</view>

相关文章

网友评论

      本文标题:flex布局最后一列,文字撑满换行

      本文链接:https://www.haomeiwen.com/subject/alxfrltx.html