How to limit characters in Typography of MUI?

September 30, 2022

My titles are very long I want them to look like this:

This is a title of...

This is my code

<CardContent>
 <Typography gutterBottom variant="h5" component="div">
   <Link href={`/${encodeURIComponent(data.slug)}`}>
     <a>{data.title}</a> // This is a string of title text
   </Link>
  </Typography>
</CardContent>

How to limit them to 18 characters only and add … at the end?

>Solution :

Usually you solve this with CSS.
Set a max-width together with text-overflow: ellipsis;.

The advantage is better SEO and the browser is able to use the available space more efficiently than just counting characters.

For example a M character is larger than a l character.

But you can also limit it with JS:

<CardContent>
 <Typography gutterBottom variant="h5" component="div">
   <Link href={`/${encodeURIComponent(data.slug)}`}>
     <a>{data.title.length <= 18 ? data.title: (data.title.substr(0, 18) + "...")}</a> // This is a string of title text
   </Link>
  </Typography>
</CardContent>