大家都知道，對(duì)于文本溢出處理，單行溢出處理直接用css就可以處理，但是對(duì)于多行文本溢出的話(huà)，也可以用css處理，但是由于瀏覽器的兼容性，所以只能通過(guò)js結(jié)合css來(lái)處理。
點(diǎn)擊查看源碼。

單行文本溢出css核心樣式

. ellipsis{
    width: 500px; 
    overflow: hidden;
    text-overflow: ellipsis; //文本溢出顯示省略號(hào)
    white-space: nowrap; //文本不會(huì)換行
}

多行文本溢出css核心樣式，此方法只適用于webkit的內(nèi)核瀏覽器

.multiple{
     overflow: hidden;
    text-overflow:ellipsis; //文本溢出顯示省略號(hào)
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    width:500px;
}

下面通過(guò)vue+element-ui實(shí)現(xiàn)文本溢出的顯示

單行文本溢出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; // 最大的寬度，必寫(xiě)屬性
  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; // 行高很重要，一定要設(shè)置
  max-height: 54px; // 最大高度是行高的倍數(shù)
  overflow: hidden;
  word-break: break-all;
  i.more{
    position: absolute;
    display: inline-block;
    width: 50px;
    height: 18px; // 此處高度應(yīng)和行高一致
    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系列問(wèn)題一：el-upload上傳組件
element-ui+vue-cli3.0系列問(wèn)題二：表格合并
element-ui+vue-cli3.0系列問(wèn)題三：el-tooltip實(shí)現(xiàn)文本溢出省略號(hào)處理