React truncate text by line

Question

I need to truncate card title (text) with react.

I try to use dotdotdot component https://www.npmjs.com/package/react-dotdotdot but it doesn't work with simple component.

const content = ({title}) => <Dotdotdot clamp={2}><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Est rem magni totam quos sapiente aliquid praesentium quae sint illo quas dicta cum illum dolorum quis eveniet, corrupti porro placeat, consequatur reprehenderit aliquam distinctio voluptates voluptate, temporibus omnis. Cum quis tenetur laborum minus accusantium provident eveniet, corrupti, reiciendis aliquam suscipit hic?</p></Dotdotdot>

It doesn't work in ie11 and mozilla. In -web-kit i have -webkit-line-clamp but in mozilla and ie it doesn't work.

Do anybody know decision for this task?

Solution 1

You can install react-text-truncate and use below code to do it

<TextTruncate
  line={1}
  text="Lorem Ipsum is simply dummy text of the printing and typesetting industry."
  }
/>

Or you can visit the demo page

Solution 2

I don't know if you want that issue to get resolved or asking for other options as well.

But I usually use react-lines-ellipsis for ellipsis. If you can go with other alternatives then you can check demo in other broswers as well.

Comments

[user988544]

Hey does this library also support a 'collapse' functionality? What If I want user to be able to collpase content back?

[achyut pokhrel]

I don't think it has

[Aleksey Makas]

There is a problem with ie11. It doesn't work in ie11

[Jim Edelstein]

Shiny the demo link doesn't work and the demo linked from github is broken.

[Anna Ira Hurnaus]

This is the correct link to the dema page: shinychang.github.io/React-Text-Truncate