javascriptreactjsinternet-explorer-11mozilla

React truncate multi line text by line

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

enter image description here

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

  • 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