uniapp的描述的展开与收缩,超过三行有省略号才显示

html代码:

html 复制代码
<view class="desc_box">
    <view id="desc" class="desc" :class="open ? 'open' : 'three'">
        {{ data.desc }}
    </view>
    <view class="expand theme-color" @click="unfold" v-if="unfoldShow">
        {{ open ? '收起' : '展开' }}
        <i class="iconfont icon-xiala" :class="open ? 'up' : ''"></i>
    </view>
</view>

js代码:

data的部分:

javascript 复制代码
// 是否打开
open: true,
// 是否展开
unfoldShow: false

methods的部分:

javascript 复制代码
/**
 * 展开收起
 */
unfold() {
    this.open = !this.open;
},
/**
 * 判断是否超过三行
 */
checkTextLines() {
    // 获取 <div> 标签的节点信息
    let query = uni.createSelectorQuery().in(this);
    query.select('.desc_box').boundingClientRect(data => {
        // 获取文本内容的高度
        let height = data.height - 70;
        console.log("data", data);
        console.log("height", height);
        // 行高为28px
        let lineHeight = 28;
        // 计算文本行数
        let lines = Math.ceil(height / lineHeight);
        // 判断文本行数是否达到了3行
        if (lines > 3) {
            console.log("文本达到了3行以上");
            this.unfoldShow = true;
            this.open = false;
        } else {
            console.log("文本3行或3行以下");
            this.unfoldShow = false;
            this.open = true;
        }
    }).exec();
}

在获取完数据的地方调用this.checkTextLines();

css部分:

css 复制代码
.desc_box {
		width: 686rpx;
		background: linear-gradient(180deg, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0.51) 100%);
		box-shadow: inset 0rpx 2rpx 6rpx 0rpx rgba(255,255,255,0.5), inset 0rpx -2rpx 6rpx 0rpx rgba(255,255,255,0.5);
		border-radius: 8rpx;
		backdrop-filter: blur(12px);
		margin-top: 24rpx;
		padding: 24rpx 20rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: flex-end;

    .desc {
        width: 100%;
        margin-top: 16rpx;
        color: #666666;
        line-height: 40rpx;
        white-space: pre-line;
    }

    .expand {
        display: flex;
        font-size: 24rpx;
        height: 34rpx;
        line-height: 34rpx;

        i {
            font-size: 24rpx;
            margin-left: 4rpx;
        }

        .up {
            transform: rotate(180deg);
        }
    }
}


.one {
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

.two {
	overflow:hidden;
	text-overflow:ellipsis;
	display:-webkit-box;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2; 
}

.three{
	overflow:hidden;
	text-overflow:ellipsis;
	display:-webkit-box;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:3; 
}
相关推荐
y先森17 分钟前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy18 分钟前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu108301891121 分钟前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿1 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡2 小时前
commitlint校验git提交信息
前端
虾球xz3 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇3 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒3 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员3 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐3 小时前
前端图像处理(一)
前端