微信小程序超出两行省略，判断是否展示全文收起

效果图

1569036268(1).jpg

1.WXML

<view class="container">
  <view class='list-box'>
    <view class='list' wx:for="{{list}}" wx:key="index">
        <text class="text {{item.collapse?'text-collapse':''}}">{{item.text}}</text>
        <text bindtap="changeCollapse" data-index="{{index}}" wx:if="{{item.showCollapse}}" class='coll-p'>{{item.collapse?'全文':'收起'}}</text>
    </view>
  </view>
</view>

2.JS

Page({
    data: {
        list: [{
                text: '文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文'
            },
            {
                text: '文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章'
            },
            {
                text: '文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章'
            }
        ],
    },
    onShow: function(){
        this.setCollapse()
    },
    //判断全文收起是否展示
    setCollapse: function() {
        var query = wx.createSelectorQuery();
        var that = this;
        query.selectAll('.text').boundingClientRect(function (rect) {
            rect.forEach((v, i) => {
                if (v.height > 45) {  //判断高度,根据各种高度取折中
                    var set = "list[" + i + "].collapse";
                    var set1 = "list[" + i + "].showCollapse";
                    that.setData({
                        [set]: true,
                        [set1]: true,
                    })
                }
            })
        }).exec();
    },
    //点击全文收起
    changeCollapse: function(e){
        var index = e.currentTarget.dataset.index;
        var set = "list[" + index + "].collapse";
        this.setData({
            [set]: !this.data.list[index].collapse
        })
    }
})

3.WXSS

.list-box{
    padding: 0 30rpx;
}
.list-box .list{
    border-bottom: 1rpx solid #e3e3e3;
    padding: 30rpx 0;
}

.list-box .list text{
    font-size: 28rpx;
    line-height: 40rpx;
    display: block;
}

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

.list-box .coll-p{
    font-size: 30rpx;
    color: #5064A3;
    margin-top: 10rpx;
}