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的部分:
// 是否打开
open: true,
// 是否展开
unfoldShow: false
methods的部分:
/**
* 展开收起
*/
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部分:
.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;
}