0

i am newbie for material ui, this is my current website state: reality of current website

and this what i expected: what i expected it become

as you can see from the those 2 pictures above, i want the text in the circle was shorten and truncate by 3 dots ... i tried typography of material ui with the property of nowrap but it truncated text from the very first line like this: nowrap typography

and i want it is truncated and ellipsised when text is too long and reached over 2 lines of the card, like the second image above, please help me out, thank you so much and have a good day :)

you can edit in the codesandbox demo in this link codesandbox demo

Tam Do
  • 181
  • 4
  • 15
  • I gave you a bad answer before; it's not easy as it seems. Have a look at this post: https://stackoverflow.com/questions/33058004/applying-an-ellipsis-to-multiline-text – Mario Vernari Aug 31 '20 at 15:56
  • no worry, thank for taking your time to help me out, love your effort – Tam Do Sep 03 '20 at 07:28

1 Answers1

1

You could use line-clamp

mainContent: {
  display: 'box',
  lineClamp: 2,
  boxOrient: 'vertical',  
  overflow: 'hidden',
}

Codesandbox demo

Edit card-text-overflow (forked)

hgb123
  • 13,869
  • 3
  • 20
  • 38
  • thank you, your code perfectly fit my criteria, i am sorry because of my hectic schedual until now i just have time to say thank for you, you have done so well – Tam Do Sep 03 '20 at 07:27