背景

需求

比如，有如下一个表格，请你实现它：

要求：

• 最多显示两行
• 超出部分显示为：“…详情”
• 点击详情，展开全部内容

说明：本例以vue2版本为例，其他的同理

需求分析

Element UI的el-table组件，给我们提供了一个好用的属性show-overflow-tooltip，即：

• 最多显示一行
• 超出显示省略号
• 鼠标悬停时显示全部内容

效果如下：

但是，我们现在需要显示两行，所以这个属性不符合我们的需求。

解决方案

在线体验

灵感来源

我在其他论坛上看到一篇文章：https://juejin.cn/post/7347221074704777226
他的核心思想是用CSS 滚动驱动动画和CSS 样式查询等较新的CSS属性来实现，是比较好的思路，确实也实现了。
但是不适用在el-table中：

• 新属性不是100%兼容，需要较新的浏览器版本(Chrome 115+)；
• el-table有某些样式影响，所以导致无法实现；

该博主的示例代码如下：
效果如下：

也有一些其他人的实现思路，有异曲同工之妙，此处不一一细说了。

我的实现方案

思路：既然是在el-table中，那就需要自定义写样式，且表格中有循环，基于上述代码受影响而不生效，所以此处只能用js来辅助了，纯靠CSS是行不通的了。

我的示例代码如下：

<template>
   <el-table :data="tableData">
      <el-table-column label="URL地址" prop="url" align="center" />
      <el-table-column label="作废原因" prop="remark" align="center" width="270">
        <template v-slot="scope">
          <div class="remark-cell">
            <div
              :class=