element-ui+vue-cli3.0系列问题三：el-tooltip实现多行，单行文本溢出省略号处理

大家都知道，对于文本溢出处理，单行溢出处理直接用css就可以处理，但是对于多行文本溢出的话，也可以用css处理，但是由于浏览器的兼容性，所以只能通过js结合css来处理。
点击查看源码。

单行文本溢出css核心样式

. ellipsis{
    width: 500px; 
    overflow: hidden;
    text-overflow: ellipsis; //文本溢出显示省略号
    white-space: nowrap; //文本不会换行
}

多行文本溢出css核心样式，此方法只适用于webkit的内核浏览器

.multiple{
     overflow: hidden;
    text-overflow:ellipsis; //文本溢出显示省略号
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    width:500px;
}

下面通过vue+element-ui实现文本溢出的显示

单行文本溢出hover显示更多

<template>
  <el-tooltip
    placement="top"
    popper-class="single-tooltip"
    :disabled="flag">
    <div class="text-wrapper" slot="content">
      {{content}}
    </div>
    <div class="wrap_one">
      <i :ref="`content${index}`">{{content}}</i>
    </div>
  </el-tooltip>
</template>
<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';
@Component
export default class SingleComponent extends Vue {
  private flag: boolean = false; // Tooltip 是否可用
  @Prop() private index!: any;
  @Prop() private content!: any;
  private overWidth(index: any) {
    this.$nextTick(() => {
      const contentwidth: any = this.$refs[`content${index}`] as HTMLDivElement;
      // 此处500和 max-width属性的值同步
      if (contentwidth.offsetWidth > 500) {
        this.flag = false;
      } else if (contentwidth.offsetWidth <= 500) {
        this.flag = true;
      }
    });
  }
  private created() {
    this.overWidth(this.index);
  }
}
</script>
<style lang="scss">
.wrap_one{
  display: inline-block;
  max-width: 500px; // 最大的宽度，必写属性
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 18px;
  cursor: pointer;
}
</style>

single.png

多行文本溢出hover显示更多

<template>
  <el-tooltip
    placement="top"
    popper-class="single-tooltip"
    :disabled="flag">
    <div class="text-wrapper" slot="content">
      {{content}}
    </div>
    <div class="multiple-wrap" :ref="`multiple-wrap${index}`">
      <div class="multiple-content" :ref="`multiple-content${index}`">
        {{content}}
      </div>
      <i class="more" v-if="!flag">...</i>
    </div>
  </el-tooltip>
</template>
<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';
@Component
export default class MultipleComponent extends Vue {
  private flag: boolean = false;
  @Prop() private index!: any;
  @Prop() private content!: any;
  private overHeight(index: any) {
    this.$nextTick(() => {
      const wrapheight: any = this.$refs[`multiple-wrap${index}`] as HTMLDivElement;
      const contentheight: any = this.$refs[`multiple-content${index}`] as HTMLDivElement;
      if (contentheight.offsetHeight > wrapheight.offsetHeight) {
        this.flag = false;
      } else if (contentheight.offsetHeight <= wrapheight.offsetHeight) {
        this.flag = true;
      }
    });
  }
  private created() {
    this.overHeight(this.index);
  }
}
</script>
<style lang="scss">
.multiple-wrap{
  position: relative;
  cursor: pointer;
  font-size: 14px;
  line-height: 18px; // 行高很重要，一定要设置
  max-height: 54px; // 最大高度是行高的倍数
  overflow: hidden;
  word-break: break-all;
  i.more{
    position: absolute;
    display: inline-block;
    width: 50px;
    height: 18px; // 此处高度应和行高一致
    bottom: 0;
    right: 0;
    text-align: right;
    font-size: 18px;
    background: -webkit-linear-gradient(left, transparent, #fff 55%);
    background: -o-linear-gradient(right, transparent, #fff 55%);
    background: -moz-linear-gradient(right, transparent, #fff 55%);
    background: linear-gradient(to right, transparent, #fff 55%);
  }
}
</style>

multiple.png

element-ui+vue-cli3.0系列问题一：el-upload上传组件
element-ui+vue-cli3.0系列问题二：表格合并
element-ui+vue-cli3.0系列问题三：el-tooltip实现文本溢出省略号处理