单/多行文本截断的vue组件

TextEllipsis.vue

<template>
  <div class="text-ellipsis" :style="{height: textHeight,lineHeight: lineHeight}">
    <div class="ellipsis-before" :style="{height: textHeight}"></div>
    <div class="ellipsis-content">
      <template v-if="$slots.default">
        <slot></slot>
      </template>
      <template v-else>{{text}}</template>
    </div>
    <div class="ellipsis-after" :style="{top: '-'+lineHeight, height: lineHeight}">...</div>
  </div>
</template>

<script>
export default {
  props: {
    text: String,
    lineHeight: {
      type: String,
      default: "25px" // 行高，默认25px
    },
    row: {
      type: [String, Number],
      default: 2 // 截断行数，默认第二行进行截断
    }
  },
  computed: {
    textHeight() {
      let rows = parseInt(this.row);
      return `${parseInt(this.lineHeight) * (rows > 0 ? rows : 1)}px`;
    }
  }
};
</script>

<style scoped>
/* 单行文本截断 */
.text-ellipsis__single {
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 单行文本截断 */

.text-ellipsis {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.text-ellipsis .ellipsis-before {
  float: left;
  width: 5px;
}
.text-ellipsis .ellipsis-after {
  font-size: 20px;
  text-align: right;
  float: right;
  position: relative;
  width: 50px;
  left: 100%;
  margin-left: -45px;
  padding-right: 5px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), #ffffff 60%);
}

.text-ellipsis .ellipsis-content {
  float: right;
  width: 100%;
  margin-left: -5px;
  word-break: break-all;
}
</style>