React 文本溢出处理

在文字超出文本框限定区域的时候，我们一般要进行溢出处理，把多余的显示不下的文字用...代替，之前用js，css处理时候我们可以使用webkit属性进行css操作，例如

一行文本溢出 可以直接使用这三个属性

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

多行文本（

适用于WebKit浏览器及移动端），还有其他的结合js操作隐藏溢出元素的就不写啦

  
  
  



           

                 吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧
             啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦
         

就是这个效果啦

搭配react实现

然而遇到react的时候 ，并且上面那个方法兼容性也不是很好，然后就找到了如下方法
使用LinesEllipsisLinesEllipsis详细介绍

import LinesEllipsis from 'react-lines-ellipsis'

点击阅读更多

轻松搞定✌️，然后结合state控制就也很方便实现类似点击阅读更多，收起的功能啦，根据state值控制maxLine的值例如 maxLine={showAllMsg ? 50 : 3}就ok啦