React 文本溢出处理

时间 2019-11-09

标签 react 文本溢出处理栏目 React 繁體版

原文原文链接

在文字超出文本框限定区域的时候，咱们通常要进行溢出处理，把多余的显示不下的文字用...代替，以前用js，css处理时候咱们能够使用webkit属性进行css操做，例如css

一行文本溢出能够直接使用这三个属性

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
复制代码

多行文本（

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

<!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详细介绍react

import LinesEllipsis from 'react-lines-ellipsis'
<LinesEllipsis text={你要用的文本} maxLine={3} 
ellipsis='...' trimRight basedOn='letters' />
复制代码

点击阅读更多

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

React 文本溢出处理

一行文本溢出 能够直接使用这三个属性

多行文本（

搭配react实现

点击阅读更多

一行文本溢出能够直接使用这三个属性