React truncate text by line

javascript reactjs internet-explorer-11 mozilla
Aleksey Makas picture Aleksey Makas · Dec 8, 2017 · Viewed 11.4k times · Source

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?

Answer

Shiny picture Shiny · May 24, 2018

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

Related questions

Objects are not valid as a react child (In Internet explorer 11 for React 15.4.1)

Objects are not valid as a React child (found: object with keys {$$typeof, type, key, ref, props, _owner, _store}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from …

Read More
ReactJS doesn't render in IE11

My site works flawlessly in web browsers, but IE11 shows this error in console. What should I do with this? React.render( <NewsFeed tagFilter={tagFilter}/>, document.getElementById('newsFeed') ); 'NewsFeed' is undefined EDIT: Here is the newsfeed (.js JSX …

Read More
Loop inside React JSX

I'm trying to do something like the following in React JSX (where ObjectRow is a separate component): <tbody> for (var i=0; i < numrows; i++) { <ObjectRow/> } </tbody> I realize and understand why this isn't …

Read More