Ellipsis on antd long text


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

enter image description here

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

Source: CSS – Stack Overflow

November 29, 2021
Category : News
Tags: antd | css | reactjs | styled-components

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.