微信小程序：文本的展开与收起_微信小程序 - 实现文本展开与收起功能组件

<view class='special'>
              <view class="view_jianjie {{ellipsis?'ellipsis':'unellipsis'}}">
       这里是文字内容 这里是文字内容 这里是文字内容 这里是文字内容 这里是文字内容 这里是文字内容 这里是文字内容 这里是文字内容 这里是文字内容 这里是文字内容 这里是文字内容 这里是文字内容
              </view>
              <view class='xiala_btn' bindtap='ellipsis'>
                <image class='xiala' src="{{ellipsis?'/images/icon_xiala2.png':'/images/icon_xiala.png'}}"></image>
              </view>
 
css：
.special{
  display: flex;
  flex-direction: column;
}
.view_jianjie{
  width: 460rpx;
  padding-left: 20rpx;
  font-size: 26rpx;
  color: #333;
  line-height: 45rpx;
  display: -webkit-box;
  -webkit-box-orient:vertical;
  text-overflow: ellipsis;
   overflow:hidden; /*通过以上四行实现收缩功能 */
}
.xiala_btn{
  text-align: right;
}
.xiala {
  width: 20rpx;
  height: 12rpx;
  padding: 5rpx;
}
/* 展开收缩 */
.ellipsis{
  -webkit-line-clamp:3; 
}
.unellipsis{
  -webkit-line-clamp:0;  /*全部显示*/
}
 
js：
data: {
    ellipsis: true, // 文字是否收起，默认收起
  },
  /**
   * 收起/展开按钮点击事件
   */
  ellipsis: function () {  
    this.setData({
      ellipsis: !this.data.ellipsis
    }) 
  },