微信小程序有时候需要实现的功能：
1、文本超过n行显示省略号
2、省略时，显示 展开/收起 按钮
3、文本不超过n行时，不显示省略号和展开/收起按钮
效果图
6666.gif
思路：
文本是否显示省略号，通过css可以实现；
判断是否显示展开/收起按钮；
通过SelectorQuery选择器，获取text及其父元素的高度，判断text高度是否超过其父元素高度，决定是否显示展开/收起按钮即可；
用到的知识点
wx.createSelectorQuery()：返回一个 SelectorQuery 对象实例。
SelectorQuery.exec(function callback)：执行所有的请求。请求结果按请求次序构成数组，在callback的第一个参数中返回。
NodesRef.boundingClientRect(function callback)：添加节点的布局位置的查询请求。相对于显示区域，以像素为单位。
代码
js代码中，通过选择器获取两者的高度，如果text高度高于view，则说明有省略文本，显示展开/收起按钮。
<view id="frame" class='frame {{fold == false ? "nofold":""}}'>
<text id="content">{{detail}}</text>
</view>
<view class="btn" bindtap="click" wx:if="{{fold != null}}">{{fold ? '展开':'收起'}}</view>
js
var query = wx.createSelectorQuery();
let that = this
query.select('#content').boundingClientRect();
query.select('#frame').boundingClientRect();
query.exec(function (res) {
console.log(res)
if (res[0] && res[0].height) {
if (res[0].height > res[1].height) {
that.setData({
fold: true,
});
} else {
that.setData({
fold: null,
});
}
}
})
wxss
.frame {
width: 96%;
max-height: 206rpx;
text-align: left;
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
white-space: normal !important;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
margin: 10rpx auto;
}
.nofold {
display: block;
text-overflow: unset;
-webkit-line-clamp: unset;
max-height: unset;
}
.btn{
width: 90%;
text-align: center;
background: lightblue;
padding: 10rpx;
margin: 20rpx auto;
}
