在<el-table-column </el-table-column>中，怎么将过长的文字显示在一行，超出宽度时，用省略表示被隐藏的文本，并且点击省略号可以展开，并写出一个案例

可以在<el-table-column>中使用CSS属性text-overflow和white-space来控制文本的显示方式。当text-overflow设置为"ellipsis"时，文本超出宽度时会被省略表示；当white-space设置为"nowrap"时，文本不会自动换行。此外，还可以在省略号处添加一个按钮或链接，通过JavaScript控制展开文本的显示。

以下是一个示例代码：

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column prop="name" label="姓名" width="100">
        <template slot-scope="scope">
          <div class="ellipsis" :title="scope.row.name">
            {{scope.row.name}}
            <span v-if="scope.row.isOverflow" class="expand" @click="handleExpand(scope.row)">...</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="age" label="年龄" width="100"></el-table-column>
      <el-table-column prop="address" label="地址" width="200">
        <template slot-scope="scope">
          <div class="ellipsis" :title="scope.row.address">{{scope.row.address}}</div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: "张三",
          age: 18,
          address: "北京市海淀区西二旗北路168号",
          isOverflow: false
        },
        {
          name: "李四",
          age: 25,
          address: "上海市徐汇区复兴中路123号，这是一段有点长的地址",
          isOverflow: true
        },
        {
          name: "王五",
          age: 30,
          address: "广州市天河区华南农业大学",
          isOverflow: false
        }
      ]
    }
  },
  methods: {
    handleExpand(row) {
      row.isOverflow = false
      this.$nextTick(() => {
        row.isOverflow = true
      })
    }
  }
}
</script>

<style scoped>
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.expand {
  cursor: pointer;
  color: #409EFF;
}
</style>