uniapp开发微信小程序，多行文本换行，动态改变文字区域宽度

需求：商品标题部分超出两行显示… 且当点击编辑显示选择按钮后，文字区域宽度变小后，文字不能溢出。
如图：

HTML代码

<!-- 收藏 -->
<view class="goodsBox" v-if="type === 'favorite'" @tap="jump('/pageGoods/detail/index', { id: detail.id })"><view class="img"><image class="goodsImg" :src="detail.goods_image" mode=""></image></view><view class="goodsLeft"><view class="goodsLeftTitle f14 more-t" >{{ detail.goods_sku_text }}</view><view class="collectionNum">{{ detail.collectionNum>10000?parseInt(detail.collectionNum/10000)+'万+':detail.collectionNum }}人收藏</view><view style="display: flex;flex-flow: row nowrap;"><view class="price c1" style="font-size: 24rpx;" :style="detail.depreciate==0?'flex:1;':''">￥{{ detail.goods_price.toFixed(2) }}</view><view style="flex: 1;" class="c1 f12 ml8" v-show="detail.depreciate"> 距加入降￥{{detail.depreciate}}</view><view class="x-c"> <view class="box_label br16 bor c1 x-c f12">购买</view></view></view></view>
</view>

.goodsBox {display: flex;.img {width: 170rpx;height: 170rpx;.goodsImg {width: 170rpx;height: 170rpx;border-radius: 10rpx;background-color: #ccc;}}.goodsLeft {flex: 1;margin-left: 10rpx;.goodsLeftTitle {overflow: hidden;text-overflow: ellipsis;}.f14 {font-size: 14px;}/*多行文本溢出省略号*/.more-t {overflow: hidden;// 超出的文本隐藏text-overflow: ellipsis;// 溢出用省略号显示display: -webkit-box;// 将对象作为弹性伸缩盒子模型显示。-webkit-line-clamp: 2;// 这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。-webkit-box-orient: vertical;// 从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）transition: all linear 0.2s;}.collectionNum {margin: 10rpx 0;color: #a6a6a6;font-size: 24rpx;}.c1{color: rgba(255, 57, 51, 1) !important;}.f12 {font-size: 12px;}.ml8 {margin-left: 8px;}.bor{border: 1rpx solid rgba(255, 57, 51, 1);}.br16{border-radius: 32rpx;}.box_label{width: 106rpx;height: 40rpx;}/*上下左右居中*/.x-c {display: flex;justify-content: center;align-items: center;}.price {color: #e1212b;font-size: 32rpx;font-family: PingFang SC;font-weight: 600;}}
}

uniapp开发微信小程序，多行文本换行，动态改变文字区域宽度相关推荐

uniapp开发微信小程序设置分包，简单易学（图解）
我们使用uniapp开发微信小程序的时候,当我们的包体积过大的时候,无法真机模拟因为小程序单个包只支持2MB,所以这时候我们要选择去分包. 有人要问了分包难吗?分包很简单.但是最重要的来了,分包这 ...
uni-app开发微信小程序使用微信小程序的插件
假如使用uni-app开发微信小程序需要用到官方插件----OCR插件, 插件地址如下: OCR插件申请方式见插件地址介绍.本文主要记录调用方式 1.在manifest.json的"mp- ...
Uni-app开发微信小程序使用本地图片做背景图
Uni-app开发微信小程序使用本地图片做背景图 <view class="content" :style="{backgroundImage:'url(' + i ...
uniapp开发微信小程序，从构建到上线
前言: 本文主要介绍 uniapp 的基础使用,以及使用 uniapp 在企业开发的过程中的一个详细流程,比较适合第一次使用uniapp 开发微信小程序的伙伴,或者没有过实战经验的小伙伴参考:使用 H ...
uniapp开发微信小程序分享功能
记一次uniapp开发微信小程序遇到的问题, 问题: 关于button的分享属性, 在HbuilderX中开发时,直接将button覆盖在image上,将button设置为透明,可以直接实现分享功能, ...
uniapp开发微信小程序-7.用户填写表单信息
uniapp开发微信小程序-7.用户填写表单信息本章让用户通过表单更新自己的个人信息,也是本系列文章最后一篇入门分享,之后碰到新颖.常用的功能会继续分享给大家,如果大家有任何问题欢迎留言,我会尽快线 ...
uniapp开发微信小程序使用painter绘制海报
uniapp开发微信小程序使用painter绘制海报参考文章: 1.简书大佬文章https://www.jianshu.com/p/e9cab600cf6c 2.CSDN大佬文章https://bl ...
uniapp开发微信小程序-4.页面跳转与横向滑动
uniapp开发微信小程序-4.页面跳转与横向滑动本篇文章主要是想记录一下横向滑动功能,备忘的同时给大家做个分享. 但既然是初级分享系列文章,为了方便新手朋友的上手工作,还是在此之前说一下页面跳转的 ...
uniapp开发微信小程序 wx.navigateBack()携带数据问题
uniapp开发微信小程序 wx.navigateBack()携带数据问题某个表单页面有时需要跳转另一个页面查询数据但如此想要保存当前页面数据需要在另一个查询页面调用 wx.navigateBa ...
uniapp开发微信小程序支付
uniapp开发微信小程序支付 1.申请接入微信支付打开微信公众平台申请接入微信支付:https://mp.weixin.qq.com/ 2.调用统一下单和微信支付接口 uni.login({suc ...

uniapp开发微信小程序，多行文本换行，动态改变文字区域宽度

uniapp开发微信小程序，多行文本换行，动态改变文字区域宽度相关推荐

最新文章

热门文章