How to toggle antd Typography.Paragraph ellipsis

Question

I am using the <Typography.Paragraph> component to display the description of some items in a list. I want to limit the number of rows in the description to 2.

Now I can use the ellipsis prop for the <Typography.Paragraph> to limit the description to only display 2 lines and set it to be expandable. However, I cannot seem to find a way to collapse the text back to just 2 rows with an ellipsis (...)

This is a snippet of my current code.

const listOfLongText = [.....];

listOfLongText.map((text,i) => {
    <Paragraph ellipsis={{ rows: 2, expandable: true }}> 
        {text}
    </Paragraph>
})

I know about the onExpand callback for the ellipsis prop of Paragraph but not sure how to get the toggle between expand and collapse functionality using onExpand

The <Typography.Paragraph> API is defined here

If you need more information, drop a comment and I will provide it.

Answer 1

There is no such option in the current antd version (3.23.4).

You need to control it via state for example:

<Paragraph
  ellipsis={{
    rows: 3,
    expandable: true,
    onExpand: this.typoExpand
  }}
>
  Ant Design, a design language for background applications, is refined by Ant
  UED Team. Ant Design, a design language for background applications, is
  refined by Ant UED Team. Ant Design, a design language for background
  applications, is refined by Ant UED Team. Ant Design, a design language for
  background applications, is refined by Ant UED Team. Ant Design, a design
  language for background applications, is refined by Ant UED Team. Ant Design,
  a design language for background applications, is refined by Ant UED Team.
</Paragraph>;