在文字超出文本框限定区域的时候，我们一般要进行溢出处理，把多余的显示不下的文字用...代替，之前用js，css处理时候我们可以使用webkit属性进行css操作，例如
一行文本溢出 可以直接使用这三个属性
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
多行文本（
适用于WebKit浏览器及移动端），还有其他的结合js操作隐藏溢出元素的就不写啦
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div style = 'width:400px;
height:70px;
border:1px solid black;'>
<p style='display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; //从上到下垂直排列子元素
-webkit-line-clamp:2; //这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。
overflow:hidden;'>
吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧
啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦
</p>
</div>
</body>
</html>
就是这个效果啦
搭配react实现
然而遇到react的时候 👿，并且上面那个方法兼容性也不是很好，然后就找到了如下方法💃
使用LinesEllipsisLinesEllipsis详细介绍
import LinesEllipsis from 'react-lines-ellipsis'
<LinesEllipsis text={你要用的文本} maxLine={3}
ellipsis='...' trimRight basedOn='letters' />
点击阅读更多
轻松搞定✌️，然后结合state控制就也很方便实现类似点击阅读更多，收起的功能啦，根据state值控制maxLine的值例如 maxLine={showAllMsg ? 50 : 3}就ok啦
