微信小程序实现超过指定行数文本省略展示并动态显示查看全部

实现方法

通过获取文本高度，动态绑定ellipsis类名及动态控制显隐查看全部按钮

 【微信小程序相关API】WXML / wx.createSelectorQuery (qq.com)https://developers.weixin.qq.com/miniprogram/dev/api/wxml/wx.createSelectorQuery.html

WXML / NodesRef / NodesRef.boundingClientRect (qq.com)https://developers.weixin.qq.com/miniprogram/dev/api/wxml/NodesRef.boundingClientRect.html

值得注意的是，使用for循环创建的备注卡片，key值取值很重要！避免使用index

微信小程序wx:for 的使用以及wx:key绑定_微信小程序 wx:for-CSDN博客

wx:for详解(附wx:key注意事项)-CSDN博客 

<!-- 卡片父组件 -->

<view class="card-list">
    <view class="card-list-box" wx:if="{{info.length}}">
        <card-item wx:for="{{info}}" wx:key="id" cardItem="{{item}}" class="card-item" bindviewAll="viewAll"></card-item>
    </view>
    <text class="no-info-text" wx:else>无</text>
 </view>

<!--卡片子组件-->

<view class="card-item {{height >119?'':'padding-bottom'}}">
    <view class="card-head" >
        <view class="name">{{formateInfo.staffName}}</view>
        <text class="time">{{formateInfo.createTime}}</text>
    </view>
    <view  class="cardBody {{height >119?'ellipsis':''}}">
        {{formateInfo.remark}}
    </view>
    <view class="card-footer" bindtap="viewAll" data-item="{{formateInfo}}" wx:if="{{height >119}}">
        <view class="iconfont icon-chakan"></view>
        <text>查看全部备注</text>
    </view>
</view>

//卡片子组件

Component({
    properties: {
        cardItem:{
            type:Object,
            value:{}
        }
    },
    observers: {
        'cardItem':function(val){
            //格式化时间
            val.createTime=val.createTime.replaceAll('-', '/')
            this.setData({
                formateInfo:val
            })
        }
    },
    data: {
        formateInfo:{},
        height:null
    },
    lifetimes: {
        ready: function() {
            const query = wx.createSelectorQuery().in(this)
            const _this = this
            
            //获取文本高度
            query.select('.cardBody').boundingClientRect(function (res) {
                _this.setData({ height: res.height })
              })
              query.exec()
        },
        detached: function() {
          // 在组件实例被从页面节点树移除时执行
        },
      },
    methods: {
        // 查看全部备注
        viewAll(e){
            console.log('点击的对象',e.currentTarget.dataset.item)
            this.triggerEvent('viewAll',e.currentTarget.dataset.item)
        }
    },
  })

多行省略样式 

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