参考网站效果

• 爱企查：https://aiqicha.baidu.com/company_detail_28783255028393
• 天眼查：https://www.tianyancha.com/company/22822

Vue.js代码实现

组件：TextOverflow.vue

<template>
  <div :class="{'overflow-hidden': !isShowMore}">
    <slot></slot>
    <span
      v-if="isShowMore"
      class="link"
      @click="handleHideMoreClick"
    >
      收起</span>
    <span
      v-else
      class="show-more-btn"
      @click="handleShowMoreClick"
    >
      <span>
        ...</span>
      <span class="link">
        展开</span>
    </span>
  </div>

</template>

<script>
// created at 2021-09-23
export default {
  name: 'TextOverflow',

  data() {
    return {
      isShowMore: false,
    };
  },

  methods: {
    handleShowMoreClick() {
      this.isShowMore = true;
    },

    handleHideMoreClick() {
      this.isShowMore = false;
    },
  }
};
</script>

<style>
.overflow-hidden {
  position: relative;
  overflow: hidden;
}

.show-more-btn {
  position: absolute;
  display: block;
  right: 0;
  bottom: 0;
  width: 70px;
  text-align: right;
  /* 背景从透明到白色，过渡 */
  background-image: linear-gradient(to right, transparent, #ffffff 26.4%);
}

.link {
  color: #409eff;
  cursor: pointer;
}
</style>

使用组件

<template>
  <div class="">
    <TextOverflow class="content">这是一段文字,文字的效果是这样的，超出部分默认会被隐藏，如果点击展开会显示全部内容</TextOverflow>
  </div>
</template>

<script>
import TextOverflow from './TextOverflow.vue';
// created at 2021-09-23
export default {
  name: 'App',

  props: {},

  components: {
    TextOverflow,
  },

  data() {
    return {};
  },

  computed: {},

  methods: {
    async getData() {},
  },

  created() {
    this.getData();
  },
};
</script>

<style >
.content {
  width: 200px;
  line-height: 20px;
  /* 设置为行高的整倍数，此处显示两行: 2 * 20px */
  max-height: 40px;
}
</style>

使用组件TextOverflow的时候，需要设置三个属性：

• width: 200px;
• line-height: 20px;
• max-height: 40px; 设置为行高的整倍数，此处显示两行: 2 * 20px

展开收起效果

其他方案

• https://github.com/Justineo/vue-clamp
• https://github.com/ruofee/vue-ellipsis-component
• CSS 实现多行文本“展开收起”