Ellipsis on antd long text

Question

I am using antd library for my frontend. I want to display the address in the below format. How can I do it with antd library?

When Address text is small

123 Example Street, #111 Toronto, ON

When Address text is long

123 Long long Long Long Long 
Long Long Long long Long Long
Long Long Long..., #111 Toronto, ON

My Code

<div style={{ margin: 10, width: "280px" }}>
  <div style={{ display: "flex", flexWrap: "wrap" }}>
    <Paragraph
      strong
      ellipsis={{
        rows: 3,
        suffix: ", #123"
      }}
    >
      Very very very very very very very very very very very very very very
      very very very very very long long long long address
    </Paragraph>
    <span>
      <Text type="secondary">Toronto, ON</Text>
    </span>
  </div>
</div>

The output of my code

Works fine for short address text

Explanation of My code

The width of the parent element is fixed so when the address text is long it should wrap for three lines and then an ellipsis should be shown if the text is longer than three lines.

Link to CodeSandbox

Answer 1

I'd truncate the "Adress text" if its too long to be properly displayed:

<div style={{ margin: 10, width: "280px" }}>
  <div style={{ display: "flex", flexWrap: "wrap" }}>
    <Paragraph
      strong
      ellipsis={{
        rows: 3,
        suffix: ", #123"
      }}
    >
      {(adressText.length > n) ? adressText.substr(0, n-1) + '&hellip;' : adressText;}
    </Paragraph>
    <span>
      <Text type="secondary">Toronto, ON</Text>
    </span>
  </div>