微信小程序展开全文

      var query = wx.createSelectorQuery()
      query.select(".class").boundingClientRect(data => {
         
      }).exec()

var query = wx.createSelectorQuery()
      query.select(".des-short").boundingClientRect(data => {

        //获取屏幕宽度
        wx.getSystemInfo({
          success: res => {
            //console.log(res)

            //获取文字高度rpx
            let height = data.height * 750 / res.screenWidth

            //文字高度
            console.log(height)
          },
        })  
      }).exec()

 <view class='des1'>
    <text>{{text3}}</text>
 </view>

.des1 {
  margin-left: 50rpx;
  margin-top: 30rpx;
  width: 650rpx;
  font-size: 26rpx;
  color: #484848;

  display: -webkit-box;            /* 定义为自适应布局 */
  word-break: break-all;           /* 换行模式 */
  text-overflow: ellipsis;         /* 超出文字用省略号代替 */
  overflow: hidden;                /* 多出部分隐藏 */
  -webkit-box-orient: vertical;    /* 竖直方向的超出和隐藏 */
  -webkit-line-clamp: 3;           /* 设定行数为3 */ 
}

<view class='container'>

  <!-- 例：少于三行 -->
  <view class='{{showTotal1 ? "des" : "des-short1 des-short"}}' style='-webkit-line-clamp: {{lineNum1}};'>
    <text>{{text1}}</text>
  </view>
  <view wx:if="{{showTotalBtn1}}" class='btn'>显示全部</view>

  <!-- 例：等于三行，但不超过三行 -->
  <view class='{{showTotal2 ? "des" : "des-short2 des-short"}}' style='-webkit-line-clamp: {{lineNum2}};'>
    <text>{{text2}}</text>
  </view>
  <view wx:if="{{showTotalBtn2}}" class='btn'>显示全部</view>

  <!-- 例：超过三行 -->
  <view class='{{showTotal3 ? "des" : "des-short3 des-short"}}' style='-webkit-line-clamp: {{lineNum3}};'>
    <text>{{text3}}</text>
  </view>
  <view wx:if="{{showTotalBtn3}}" class='btn' bindtap='showAll'>显示全部</view>
</view>

.des {
  margin-left: 50rpx;
  margin-top: 30rpx;
  width: 650rpx;
  font-size: 26rpx;
  color: #484848;
}

.des-short {
  margin-left: 50rpx;
  margin-top: 30rpx;
  width: 650rpx;
  font-size: 26rpx;
  color: #484848;

  display: -webkit-box;            /* 定义为自适应布局 */
  word-break: break-all;           /* 换行模式 */
  text-overflow: ellipsis;         /* 超出文字用省略号代替 */
  overflow: hidden;                /* 多出部分隐藏 */
  -webkit-box-orient: vertical;    /* 竖直方向的超出和隐藏 */
  -webkit-line-clamp: 4;           /* 设定行数为4 */ 
}

.btn {
  margin-top: 10rpx;
  margin-left: 50rpx;
  color: lightseagreen;
  font-size: 26rpx;
}

Page({
  data: {
    showTotal1: false,
    showTotal2: false,
    showTotal3: false,
  },
  onLoad: function() {

    wx.getSystemInfo({
      success: res => {
        console.log(res)
        //获取屏幕宽度
        this.data.screenWidth = res.screenWidth
      },
    })

    this.setData({
      text1: '我不是懒，我是享受不作为',
      text2: '微信小程序展开全文，解决方案，实现这个功能并不难，难的是开始没思路，。。。。。。怎么就凑不齐刚刚好两行半呢。。。',
      text3: `雅各布一个35岁的欧洲生产经理，每天为了解决各种问题从工厂的这一头跑到另一头，仅仅是为了保证生产能正常进行。雅各布清楚的知道如果想成为一名优秀的领导者，他必须为自己留有空余时间思考。为部门的战略布局所出谋划策，扩大业务。但每天的繁杂琐事让他无从顾忌。

那么雅各布应该如何增强企业内部各部门之间的合作呢？

如何预测这瞬息万变的市场呢？

那他的解决方法是什么呢？

也许像雅各布一样，你也正处于一个混乱期，有太多的事情要处理，而没有足够的时间去反思业务的变化情况以及去思考如何成为一名优秀的领导者。很多需要紧急处理的事情限制着你，让你没有办法去做那些更重要的事。但是在努力学会做好一个领导者的问题上，你面临着一个更大的挑战：那就是只有先行动起来，你才能知道关于自己，关于工作你需要做些什么，而不仅仅是思考。

作者：沐轻舟
链接：https://www.jianshu.com/p/6d51bade33b9
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。`,
    }, () => {
      let query1 = wx.createSelectorQuery()
      query1.select(".des-short1").boundingClientRect(data => {
        //获取屏幕宽度
        let height = data.height * 750 / this.data.screenWidth
        console.log(height)
        
        this.setData({
          lineNum1: 3,
          showTotalBtn1: height > 130 ? true : false 
        })
        
      }).exec()

      let query2 = wx.createSelectorQuery()
      query2.select(".des-short2").boundingClientRect(data => {
        //获取屏幕宽度
        let height = data.height * 750 / this.data.screenWidth
        console.log(height)

        this.setData({
          lineNum2: 3,
          showTotalBtn2: height > 130 ? true : false
        })
      }).exec()

      let query3 = wx.createSelectorQuery()
      query3.select(".des-short3").boundingClientRect(data => {
        //获取屏幕宽度
        let height = data.height * 750 / this.data.screenWidth
        console.log(height)

        this.setData({
          lineNum3: 3,
          showTotalBtn3: height > 130 ? true : false
        })
      }).exec()
    })
  },

  showAll: function() {
    this.setData({
      showTotal3: true,
      showTotalBtn3: false
    })
  },
})