效果如下：

背景：

在网上和社区找了很多实现都没成功，找到的在H5上的实现方案在小程序开发工具里能用，但真机存在兼容性问题，导致文本消失。H5的解决方案是使用dispaly:-webkit-box;配合展开文字的float: right;布局实现，核心css、html代码如下：

  展开
  这里是文本内容这里是文本内容这里是文本内容这里是文本内容这里是文本内容这里是文本内容这里是文本内容这里是文本内容这里是文本内容

.text {
        font-size: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: justify;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        position: relative;
      }
      .text::before {
        content: "";
        height: calc(100% - 24px);
        float: right;
      }
      .btn {
        float: right;
        clear: both;
        margin-left: 10px;
        font-size: 16px;
        padding: 0 8px;
        background: #3f51b5;
        line-height: 24px;
        border-radius: 4px;
        color: #fff;
        cursor: pointer;
        border: 0;
        /* margin-top: -30px; */
      }

思路：

找了下原因，大概就是float布局和display: -webkit-box;不兼容。改变方案，只使用float布局，换行通过计算内容高度，并拼接...来实现。

实现：

代码片段：https://developers.weixin.qq.com/s/eu3uYum77zTR

源文件：

index.js 文件：

Component({
​
  /**
   * 组件的属性列表
   */
  properties: {
    // 文案内容
    content: {
      type: String,
      observer(val) {
        if (val) {
          this.handleContentArea()
        }
      }
    },
    /**
     * 字体大小 rpx
     */
    fontSize: {
      type: String,
      value: '28'
    },
    /**
     * lineHeight rpx
     */
    lineHeight: {
      type: String,
      value: '42'
    },
    /**
     * 溢出 line 行显示更多
     */
    line: {
      type: String,
      value: '2'
    },
    /**
     * 内容字体颜色 default #202020
     */
    color: {
      type: String,
      value: '#202020'
    },
    /**
     * 展开折叠字体颜色 default #20202080
     */
    moreColor: {
      type: String,
      value: '#20202080'
    },
    /**
     * 收起换行展示
     */
    isCollapseBreak: {
      type: Boolean,
      value: false
    }
​
  },
​
  /**
   * 组件的初始数据
   */
  data: {
    isHasShowMore: true, // 文案是否有更多
    isShowMore: false, // 文案是否需要显示展开
  },
  lifetimes: {
    attached() {
    }
  },
​
  /**
   * 组件的方法列表
   */
  methods: {
    handleContentArea() {
      const query = this.createSelectorQuery()
      query.select('#more-text-yan').boundingClientRect(res => {
        if (res.height > this.data.lineHeight * this.data.line / 2) {
          this.setData({
            isHasShowMore: true,
            isShowMore: true
          })
        } else {
          this.setData({
            isHasShowMore: false,
            isShowMore: false
          })
        }
        this.triggerEvent('onReadMoreInit')
      }).exec()
    },
    handleClickShowMore() {
      const isShowMore = !this.data.isShowMore
      this.triggerEvent('onReadMoreChange', isShowMore)
      this.setData({
        isShowMore
      })
    },
  }
})

index.wxml 文件：

  
 <view class="more-container" style="--size:{{fontSize}}rpx;--lineHeight:{{lineHeight}}rpx;--line:{{line}};--color:{{color}};--moreColor:{{moreColor}};">
  <view class="more-content">
    <view id="more-text-yan" class="more-text {{isShowMore?'more-text-collapse':''}}"><text wx:if="{{(isHasShowMore&&isShowMore) || (!isShowMore&&!isCollapseBreak)}}" catch:tap="handleClickShowMore" class="more-collapse"><text wx:if="{{isShowMore}}" class="point">...</text>{{isShowMore?'展开':'收起'}}</text>{{content}}</view>
  </view>
  <!-- 换行展示收起按钮 -->
  <view class="more-action" wx:if="{{isCollapseBreak && !isShowMore && isHasShowMore}}" catch:tap="handleClickShowMore">收起</view>
</view>

index.wxss 文件：

.more-container {
  position: relative;
  font-size: var(--size);
  line-height: var(--lineHeight);
  color: var(--color);
}


.more-content {
  position: relative;
  font-weight: 400;
  display: flex;
  margin-top: 8rpx;
}


.more-text {
  word-break: break-all;
  min-height: var(--lineHeight);
  text-align: justify;
}


/* 处理展开 收起 溢出省略 */
.more-text-collapse {
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: calc(var(--lineHeight) * var(--line));
}


.point {
  color: var(--color);
  text-align: left;
  margin-left: calc(0rpx - var(--size));
  margin-right: var(--size);
}




.more-text::before {
  content: "";
  height: 100%;
  margin-bottom: calc(0rpx - var(--lineHeight));
  float: right;
}


.more-text .more-collapse {
  float: right;
  clear: both;
  margin-left: calc(var(--size) + 4rpx);
  color: var(--moreColor);
}


.more-action {
  position: absolute;
  right: 0;
  bottom: calc(0rpx - var(--lineHeight));
  color: var(--moreColor);
}

希望对你有所帮助！