el-table 第一列固定，且对单元格设置多行省略css后Safari浏览器上表格行高出现错乱？

Question

问题描述

需要每个单元格展示超出三行省略，设置css后，固定行与其余行高出现错乱、对不齐

复现步骤

以 vue-element-admin 代码为例展示

1. 设置第一列 fixed,且每一列均设置width(无 min-width)

2. 在 src/styles/index.scss 中写css

   .el-table .cell{
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 3;
     word-break: break-all;
     line-height: 23px;
   }

   效果如下：

   • 左侧固定列错位
   • 固定列只展示14个数据，没有展示完全20条

   
   

3. 有说增加 max-height ，但任然无法完全解决

   .el-table .cell{
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 3;
     word-break: break-all;
     line-height: 23px;
     max-height: 69px;
   }

   效果如下：
   
   

Answer 1

不要使用CSS的多行折断，直接使用JS对文本进行处理，如果你没有开启拖拽表头拉宽列宽功能的话。
或者渲染完毕之后手动执行 table 组件的 doLayout 方法（不确定是否可行）。