溢出部分以省略号显示，鼠标悬停显示出全部

现在我们在做一些项目的时候，经常会遇到文字过长让多出来的文字隐藏掉

1. 溢出部分以省略号显示

首先，我们需要给标签定宽

<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "DemoHome",

  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },

  mounted() {},

  methods: {},
};
</script>

<style lang="scss" scoped>
/deep/ .el-table td.el-table__cell div{
   width: 63px; // 定宽
        overflow: hidden; // 溢出部分隐藏
        white-space:nowrap; // 有些标签会自动换行，这个是禁止自动换行
        text-overflow:ellipsis; // 使溢出部分以省略号显示，这个省略号是会占用你设置的固定宽度的
}
</style>

上面的这个例子是element ui 表格里面的样例，那么我们又是如何让鼠标放在省略号上面将其显示出来呢

2. 鼠标放在省略号上面将其显出

  <el-table-column prop="date" label="日期" show-overflow-tooltip>
        <template slot-scope="scope">
          <div class="over-content">
            {{ scope.row.date }}
          </div>
        </template>
      </el-table-column>

.over-content {
  width: 80px; // 定宽
  overflow: hidden; // 溢出部分隐藏
  white-space: nowrap; // 有些标签会自动换行，这个是禁止自动换行
  text-overflow: ellipsis; // 使溢出部分以省略号显示，这个省略号是会占用你设置的固定宽度的
}

最主要的是show-overflow-tooltip这个属性值，下面的css样式是你在没有使用溢出部分以省略号显示所使用的css样式