项目中遇到这样的需求,需要在文本达到几行后不换行并且显示...
其实使用css可以完成,不过如果是多行处理,便比较麻烦,于是找到了react-lines-ellipsis来处理
项目使用react+antd 项目代码如下
<Row className="item-title">
<LinesEllipsis text={item.title} maxLine='1' ellipsis='...' trimRight basedOn='letters'/>
</Row>
<Row className="item-content">
<LinesEllipsis text={item.content} maxLine='3' ellipsis='...' trimRight basedOn='letters'/>
</Row>
功能完成后如图
image.png
react-lines-ellipsis的安装
npm install --save react-lines-ellipsis
``
网友评论