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

发布网友发布时间：2023-01-11 11:53

共1个回答

热心网友时间：2023-10-28 15:26

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>