多行文本省略号的收起、展开

实现效果

超过两行显示 省略号 ＋ 展开
点击展开之后，在文字后显示 收起

代码部分

仅说明企业简介内容部分

1. 对需要省略的内容设置唯一id【content-${item.id}】，进行多行省略处理【类名introduction】
2. 通过id获取元素，判断展示高度 是否小于 滚动高度，若小于滚动高度则需要折叠【moreDisplay[item.id] 为 true】
3. 默认为折叠状态【item.folding 为 true】，将 省略号 和 展开 绝对定位在右下角
4. 当切换为非折叠状态时【item.folding 为 false】，将 收起 接在文本内容后面，取消多行省略处理【类名all_text】

HTML

<span :id="`content-${item.id}`" :class="['introduction', item.folding ? '' : 'all_text']">
  {{ item.introduction || '-' }}
  <template v-if="moreDisplay[item.id]">
    <div v-show="item.folding" class="more">
      <div class="ellipsis">...</div>
      <div class="expand" @click.stop="showUp(item)">展开</div>
    </div>
    <span v-show="!item.folding" style="color: #0091FA" @click.stop="showUp(item)">收起</span>
  </template>
</span>

JS

import _ from 'lodash';

watch: {
  dataList() {
  	// 列表改变时重新计算是否需要折叠，用debounce防抖
    this.updateMoreDisplay();
  }
},
methods: {
  showUp(item) {
    item.folding = !item.folding
  },
  updateMoreDisplay: _.debounce(function () {
    const display = {};
    this.dataList.forEach((item) => {
      var content = document.getElementById(`content-${item.id}`);
      if (content && content.clientHeight < content.scrollHeight) {
        display[item.id] = true;
      } else {
        display[item.id] = false;
      }
    })
    this.moreDisplay = display;
  }, 300),
}

js部分处理完成。
如果为详情页面，数据不会动态变化，无需监听，可在初始化函数内用setInterval处理，例如：

  let timer = null;

timer = setInterval(() => {
  const content = document.getElementById('content-introduction');
  content && clearInterval(timer);
  if (content && content.clientHeight < content.scrollHeight) {
    this.isShowMore = true;
  } else {
    this.isShowMore = false;
  }
}, 300)

CSS

// 下面introduction中的 width: 0; flex: 1;是为了在当前特定样式下占剩余宽度的100%；如果本身就是一整行则替换为 width: 100%
.introduction {
  position: relative;
  width: 0;
  flex: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

.all_text {
  -webkit-line-clamp: inherit;
}

.more {
  box-sizing: border-box;
  position: absolute;
  width: 58px;
  right: 0;
  bottom: 0;
  padding-left: 4px;
  background-color: #fff;
}
/* 省略号 */
.ellipsis {
  float: left;
}
/* 展开收起按钮 */
.expand {
  float: right;
  color: #0091FA;
}