0

I want to limit the number of lines in a pharagraph... and i want to add three dots (...) at the end...

It should look like

Lorem Ipsum is simply dummy text of the printing
and typesetting industry.Lorem Ipsum has been...

not like

Lorem Ipsum is simply dummy text of the printing
and typesetting industry.Lor...

I was ablt to achive this last solution by adding a character count... like below

const getTrimmedText = (source: string) => {
    if (source.length > 100) {
        return source.substring(0, 100).trimEnd() + '...';
    } else {
        return source;
    }
};

but i want line count... Im using MUI typhography in react... so im somewhat limited... does anyone know how to achive this...

MrRevengerX
  • 1
  • 2
  • You can achieve this with just some simple CSS -> https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp – Reyno Aug 09 '23 at 10:05
  • example here -> https://stackoverflow.com/questions/33058004/applying-an-ellipsis-to-multiline-text – Keith Aug 09 '23 at 10:06
  • `-webkit-line-clamp` Browser compatibility on this is rather good. I would think the W3C should drop the prefix on this one. – Keith Aug 09 '23 at 10:10

0 Answers0