CSS溢出指定行数自动隐藏

背景：使用CSS封装了一个溢出隐藏的组件，便于在项目中使用。

1. 功能

• 支持单行、多行显示
• 支持显示 el-tooltip 鼠标hover提示

2. 实现效果

3. 代码实现

<template>
 <!--  hover 时显示的提示信息  -->
  <el-tooltip v-if="hoverTip" :content="content" class="item" effect="dark" placement="top">
    <div :class="{'line': row === 1, 'lines': row > 1}"
         :style="{'--row':row}"
    >
      <slot name="pre"></slot>
      {{ content }}
    </div>
  </el-tooltip>
  <div v-else>
    <div :class="{'line': row === 1, 'lines': row > 1}"
         :style="{'--row':row}"
    >
      <slot name="pre"></slot>
      {{ content }}
    </div>
  </div>
</template>

<script>
export default {
//超出指定行数自动隐藏文字
  name: 'Ellipsis',
  install(Vue) {
    Vue.component('ellipsis', this)
  },
  components: {},
  props: {
    row: {
      type: Number,
      default: 1
    },
    // 是否显示的提示信息
    hoverTip: {
      type: Boolean,
      default: true
    },
    content: {
      type: String,
      default: ''
    }
  },
  data() {
    return {}
  },
}
</script>

<style lang="scss" scoped>
.line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lines {
  display: -webkit-box;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: var(--row);
  -webkit-box-orient: vertical;
}
</style>

4. 使用方式

  <ellipsis :hoverTip="false" :row="4" :content="你的内容" />