Question

172

React truncate multi line text by line

rated 0 times [ 177] [ 5] / answers: 1 / hits: 18685 / 7 Years ago, fri, december 8, 2017, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

richardaydenc

Add To Favorites

Follow

Total Points: 148

Total Questions: 125

Total Answers: 98

Location: Seychelles

Member since Mon, Jun 28, 2021

3 Years ago

answered 7 Years ago monetm · Accepted Answer

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