小程序内容超出显示查看更多

axml

<view class='company-synopsis-panel white-bg-radius'>
  <view class='my-companye-title flex-between'>
    <view class='bold-text2851'>公司简介</view>
    <view class='text20517' onTap='toggle'>{{readmore.tip}}<image class='green-rrow' src='{{readmore.rrow}}'></image></view>
  </view>
  <view class='text20451 company-synopsis-content {{readmore.status ? "company-synopsis-ovflow" : ""}}'>
    腾讯科技（深圳）有限公司成立于1998年11月，是目前中国最大的互联网综合服务提供商之一，也是中国服务用户最多的互联网企业之一。成立十年多以来，腾讯一直秉承一切以用户价值为依归的经营理念，始终处于稳健、高速发展的状态。2004年6月16日，腾讯公司在香港联交所主板公开上市（股票代号700），也是中国服务用户最多的互联。腾讯科技（深圳）有限公司成立于1998年11月，是目前中国最大的互联网综合服务提供商之一，也是中国服务用户最多的互联网企业之一。成立十年多以来，腾讯一直秉承一切以用户价值为依归的经营理念，始终处于稳健、高速发展的状态。2004年6月16日，腾讯公司在香港联交所主板公开上市（股票代号700），也是中国服务用户最多的互联。
  </view>
</view>

acss:

.white-bg-radius{
  background:rgba(255,255,255,1);
  box-shadow:0rpx 12rpx 35rpx 0rpx rgba(215,216,218,0.8);
  border-radius:16rpx;
}
.flex-between{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.bold-text2851{
  font-size:28rpx;
  font-weight:bold;
  color:rgba(51,51,51,1);
}
.text20451{
  font-size:20rpx;
  font-weight:400;
  color:rgba(51,51,51,1);
}
.text20517{
  font-size:20rpx;
  font-weight:500;
  color:rgba(17,158,161,1);
}
.company-synopsis-panel{
  padding: 0 0 31rpx 0;
}
.my-companye-title{
  height: 74rpx;
  line-height: 74rpx;
  padding: 0 48rpx;
  border-bottom: 2rpx solid rgba(238,238,238,1);
}
.green-rrow{
  width: 20rpx;
  height: 11rpx;
  padding-left: 12rpx;
}
.company-synopsis-content{
  padding: 31rpx 45rpx 0 45rpx;
}
.company-synopsis-ovflow{
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
}

js:

Page({

/**

* 页面的初始数据

*/

data: {
  readmore: {
    status: true,
    tip: '查看更多',
    rrow:'https://res.tuoluohuodong.com/green_bottom_rrow.png'
  }
},

onReady() {
  const query = my.createSelectorQuery()
  let self = this  
  query.select(".content").boundingClientRect(function (res) {
    const lineHeight = 18
    const height = res.height
    const status = "readmore.status"
    self.setData({
      [status]: height / lineHeight > 4
    })
  }).exec()
},

toggle() {
  const status = this.data.readmore.status
  this.setData({
    readmore: {
    status: !status,
    tip: status ? '收起' : '查看更多',
    rrow: status ? 'https://res.tuoluohuodong.com/green_top_rrow.png' : 'https://res.tuoluohuodong.com/green_bottom_rrow.png'
    }
  })
 },
})

本文转载于：https://blog.csdn.net/leng0920/article/details/89372498