表格字段溢出展开收起折叠效果

需求背景

文字超出五行后，需要隐藏并提供折叠查看功能

实现效果

（展示为模拟数据）

思路借鉴

https://zhuanlan.zhihu.com/p/400514833

• 优点：只需要利用css即可实现

• 该示例
  不满足我需求中：

  1. 如果文字没有超出最大值，不需要展示折叠按钮
  2. 需要多处使用
     但也贴一下我按照博主思路写的最终代码。

• 完整代码

   

   
  
 
     
    
      但听得蹄声如雷，十余乘马疾风般卷上山来。马上乘客一色都是玄色薄毡大氅，
      里面玄色布衣，但见人似虎，马如龙，人既矫捷，马亦雄骏，每一匹马都是高头
      但听得蹄声如雷，十余乘马疾风般卷上山来。马上乘客一色都是玄色薄毡大氅，
      里面玄色布衣，但见人似虎，马如龙，人既矫捷，马亦雄骏，每一匹马都是高头
      但听得蹄声如雷，十余乘马疾风般卷上山来。马上乘客一色都是玄色薄毡大氅，
      里面玄色布衣，但见人似虎，马如龙，人既矫捷，马亦雄骏，每一匹马都是高头
     
  

• 效果

  
  

表格内容多处可折叠关键代码

借鉴以上思路，结合我这边的需求调整了下做法。需要结合js处理。

• css

  
  

• html

      
         

              ...展开
              
                 单元格内容
              
           
          

• js
  注意：需要确保table渲染完毕再执行下列逻辑，我这里利用了timeout的异步机制