美文网首页React Native开发react+antd组件使用心得
react+antd文本溢出处理react-lines-elli

react+antd文本溢出处理react-lines-elli

作者: 进击的三文鱼 | 来源:发表于2019-05-15 16:05 被阅读2次

    项目中遇到这样的需求,需要在文本达到几行后不换行并且显示...
    其实使用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
    ``
    

    相关文章

      网友评论

        本文标题:react+antd文本溢出处理react-lines-elli

        本文链接:https://www.haomeiwen.com/subject/qqapaqtx.html