css3属性识别文本框行数并处理

需求：当表格单元格内容超过4行时，隐藏多余部分并显示展开按钮。不超过4行的，正常显示且不显示展开按钮。
背景：使用dva相关技术栈 + jquery + css3 + antD
分析：
刚接到这个需求的时候，由于对css3属性了解的不够透彻，并未直接想到使用css3的webkit-line-clamp属性。最开始想的是由于单元格宽度不固定，且中文、英文、数字和符号等宽度不同，也无法使用string.length()来判断何时会换行。
之后想可以使用jq，获取确定4行时单元格高度，当内容高度超过4行高度时，给单元格中div设置属性隐藏，处理4行末尾显示…，添加展开按钮。但没想到该如何判断4行时显示到了字符串哪个位置。（还有一个问题是，使用antD的Table组件，有loading属性，只有当内容已经渲染到页面后才会获得单元格高度，此时不能将loading设为false，需要再将单元格内容删减处理后才可以更改loading，否则可能会先呈现全部内容，再显示处理后内容的情况，体验不好。）
后来查资料，发现在css3的webkit-line-clamp，（具体方法可以自行百度），会自行处理文本显示情况，只需要在添加按钮。单元格中一个整体div，div中两个子div，一个是divContent，一个是divButton，将divContent添加class

{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    max-height: 70px;
  }

jq方法通过类名获取所有divContent，循环得到高度，判断是否添加Button。
点击Button时只需要将此单元格的类移除或重新添加即可。
备注：
1.将jq方法放在了componentDidUpdate生命周期中。
2.切记给Table组件设置rowKey属性，标识每条数据的唯一性，当数据变化时，由于没有唯一标识，react的机制会认为有些行的数据并未更新，导致jq方法未执行，出现显示错误。
3.通过jq类选择器得到的数组，使用map循环无法得到预期效果。