小程序 wepy 多行文本溢出显示省略号

步骤一：先写好页面和样式
注意点：多行文本溢出隐藏、省略号、展开按钮；

步骤二：获取文本元素的高度（注意：动态数据获取需要一定时间，可以加个setTimeout延时定时器）
getCurHeight() {
let query = wepy.createSelectorQuery();
query.select(’.p-title’).boundingClientRect(rect => {
let clientHeight = rect.height;
let clientWidth = rect.width;
let ratio = 750/clientWidth;
let height = clientHeight*ratio;
if(height >= 200) { //以单行文本高度40px为例，4行
this.txtstatus = true;
this.toggleStatus = true;
}
console.log(this.txtstatus)
this.$apply();
}).exec();
}
///onLoad 监听页面加载
onLoad() {
setTimeout(() => {
this.getCurHeight();
}, 500)
}

步骤三：根据状态值判断是否显示展开按钮和省略号以及交互操作时显示的按钮名称；
txtstatus 表示文本是否显示展开按钮和省略号，
toggleStatus 表示 切换文字 “展开”和“收起”

index.scss

index.wpy

js