vue两行文本溢出显示展开按钮

Question

微信小程序
现在有一个需求，当文本超过两行溢出显示省略号，并在末尾展示展开按钮
我现在的做法是动态绑定class类名，当他的字符长度超过45的时候就

if (item.reply && item.reply.length < 45) item.replyFlag = true
 // reply字段就是返回的文字

这是正常显示

当输入的数字就会这样这里的长度都还没到45

当输入的英文长度==45的时候就会这样

    width: 94%;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
// 这是长度不超过45的样式
// 超过45的时候
// -webkit-line-clamp:inherit

请问这种怎么解决或者还有别的更好的方式处理吗

Answer 1

小程序组件封装
设置行高，2行多高换算成px，这里组件是5行换算成px是126，渲染后获取元素高度判断是否超出，超出增加对应样式和控制显示展开按钮
wx.js

import random from 'lodash.random';

Component({
  options: { addGlobalClass: true },
  properties: {
    text: String,
  },

  data: {
    showExpande: false,
    ellipsis: false,
    id: '',
  },

  lifetimes: {
    ready() {
      if (this.data.text) {
        this.init();
      }
    },
  },

  methods: {
    onToggle() {
      this.setData({ ellipsis: !this.data.ellipsis });
    },

    init() {
      this.setData({ id: 'content' + Date.now() + random(100000, 999999).toString() }, () => {
        const query = wx.createSelectorQuery().in(this);
        query.select(`#${this.data.id}`).boundingClientRect((res) => {
          const showExpande = res?.height > 126;
          this.setData({ showExpande });
        }).exec();
      });
    },
  },
});

wx.wxml

<view wx:if="{{text}}" class="act-detail_intro border-box pd-20 mt-40 radius-24 flex-column">
    <view class="font-28 {{!ellipsis ? 'ellipsis-5' : ''}}">
        <text id="{{id}}" decode space>{{text}}</text>
    </view>
    <view class="fold_btn width-full flex-end font-28" bindtap="onToggle" wx:if="{{showExpande}}">{{!ellipsis ? '展开' : '收起'}}</view>
</view>

wx.wxss

.act-detail_intro {
  background: rgba(255, 255, 255, 0.2);
  font-weight: 400;
  color: #ffffff;
  line-height: 42rpx;
}

.act-detail_intro .fold_btn {
  font-weight: 400;
  line-height: 42rpx;
  color: rgba(255, 255, 255, 0.2);
}
.ellipsis-5 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 5;
  line-clamp: 5;
}

wx.json

{
  "component": true,
  "usingComponents": {}
}