在文字超出文本框限定區(qū)域的時(shí)候落蝙，我們一般要進(jìn)行溢出處理拷况，把多余的顯示不下的文字用...代替，之前用js掘殴，css處理時(shí)候我們可以使用webkit屬性進(jìn)行css操作赚瘦，例如
一行文本溢出 可以直接使用這三個(gè)屬性
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
多行文本（
適用于WebKit瀏覽器及移動(dòng)端），還有其他的結(jié)合js操作隱藏溢出元素的就不寫(xiě)啦
<!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; //將對(duì)象作為彈性伸縮盒子模型顯示奏寨。
-webkit-box-orient:vertical; //從上到下垂直排列子元素
-webkit-line-clamp:2; //這個(gè)屬性不是css的規(guī)范屬性起意，需要組合上面兩個(gè)屬性，表示顯示的行數(shù)病瞳。
overflow:hidden;'>
吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧
啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦
</p>
</div>
</body>
</html>
就是這個(gè)效果啦
搭配react實(shí)現(xiàn)
然而遇到react的時(shí)候 ??揽咕，并且上面那個(gè)方法兼容性也不是很好，然后就找到了如下方法??
使用LinesEllipsisLinesEllipsis詳細(xì)介紹
import LinesEllipsis from 'react-lines-ellipsis'
<LinesEllipsis text={你要用的文本} maxLine={3}
ellipsis='...' trimRight basedOn='letters' />
點(diǎn)擊閱讀更多
輕松搞定??套菜，然后結(jié)合state控制就也很方便實(shí)現(xiàn)類(lèi)似點(diǎn)擊閱讀更多亲善，收起的功能啦，根據(jù)state值控制maxLine的值例如 maxLine={showAllMsg ? 50 : 3}就ok啦
