ElementUI之el-table-column内容只显示两行超出折叠鼠标hover显示弹出框

需求：

el-table中某一列内容只显示两行，超出隐藏...

鼠标hover后显示弹出框，内容过多弹出框显示滚动条

实现：

• html部分

<el-table-column label="内容" prop="content" align="center" min-width="90">
    <template slot-scope="scope">
        <el-popover trigger="hover" placement="top"  width="300">
            <p>{{scope.row.content}}</p>
            <div slot="reference">
              <span class="ellipsis">{{scope.row.content}}</span>
            </div>
        </el-popover>
    </template>
</el-table-column>

• CSS部分（注意不要加scoped，不然el-popover不生效）

.ellipsis {
  display:-webkit-box;
  text-overflow:ellipsis;
  overflow:hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient:vertical;
}
.el-popover{
  height: 150px;
  overflow: auto;
}