1. /*
    2.  * @Descripttion:
    3.  * @version:
    4.  * @Author: WangPeng
    5.  * @Date: 2021-09-24 11:11:44
    6.  * @LastEditors: WangPeng
    7.  * @LastEditTime: 2021-09-24 12:02:30
    8.  */
    9. import { Typography } from 'antd';
    10. import React from 'react';
    11. import style from './index.less';
    13. const { Paragraph } = Typography;
    15. interface props {
    16.   article: string;
    17.   rows: number;
    18.   symbol?: any;
    19.   suffix?: string;
    20. }
    22. class Demo extends React.Component<props> {
    23.   static defaultProps = {
    24.     article: '', // 要展示的文本
    25.     rows: 2, // 最多显示的行数 number
    26.     symbol: '展开', // 自定义展开描述文案 ReactNode
    27.     suffix: '', //     自定义省略内容后缀 string
    28.   };
    30.   state = {
    31.     key: `${new Date()}`, //  key   保持每一个div的key值  已备diff算法更新
    32.     isShow: false,
    33.   };
    35.   // 控制收起
    36.   onCollapse = () => {
    37.     this.setState({
    38.       key: `${new Date()}`,
    39.       isShow: false,
    40.     });
    41.   };
    43.   render() {
    44.     const { article, rows } = this.props;
    45.     const { key, isShow } = this.state;
    46.     return (
    47.       <div key={key}>
    48.         <Paragraph
    49.           ellipsis={{
    50.             rows,
    51.             expandable: true,
    52.             symbol: '展开',
    53.             suffix: '',
    54.           }}
    55.         >
    56.           {isShow ? (
    57.             article
    58.           ) : (
    59.             <>
    60.               {article}
    61.               <span className={style.collapseBtn} onClick={this.onCollapse}>
    62.                 收起
    63.               </span>
    64.             </>
    65.           )}
    66.         </Paragraph>
    67.       </div>
    68.     );
    69.   }
    70. }
    72. export default Demo;

    基于antd的Typography中的Paragraph