How do you limit the number of word lines?

Question

I'm creating an eCommerce website using NextJS and Material UI.
I've successfully displayed my products but I ran into a problem, some of my products have extremely long name that stretch my Card component.
Take this image for example:

Notice how the prices of 2 products aren't even on the same line anymore

And this is my code from index.js and data.js (where I store my products' data)

index.js

<Grid container spacing={3}>
                  {data.products.map((product) => (
                    <Grid item md={2} key={product.name}>
                      <Card style={{ border: 'none', boxShadow: 'none' }}>
                        <NextLink href={`/product/${product.slug}`} passHref>
                          <CardActionArea>
                            <CardMedia
                              component="img"
                              image={product.image}
                              title={product.name}
                            ></CardMedia>
                            <CardContent>
                              <Typography>{product.name}</Typography>  ///// NAME IS HERE
                            </CardContent>
                          </CardActionArea>
                        </NextLink>

                        <CardActions className={classes.cardActionsProducts}>
                          <div style={{ textAlign: 'center' }}>
                            <Typography
                              style={{
                                fontSize: '12px',
                                color: 'black',
                                fontWeight: 400,
                                marginTop: '10px',
                              }}
                            >
                              {product.numReviews} reviews | sold {product.sold}
                            </Typography>
                          </div>
                        </CardActions>
                        <CardActions className={classes.cardActionsProducts}>
                          <Typography
                            style={{
                              fontWeight: 'bold',
                              color: 'red',
                              margin: '0px',
                            }}
                          >
                            {product.price}đ  
                          </Typography>
                        </CardActions>
                      </Card>
                    </Grid>
                  ))}
                </Grid>

data.js

var l = 9000;
console.log(a.toLocaleString());
const data = {
products: [
{
      name: 'Ridiculously long name that cannot fit and needs to be shorten',
      slug: 'ridiculously-long-name-that-cannot-fit-and-needs-to-be-shorten',
      category: 'stuff',
      image: '/product-images/example.webp',
      price: l.toLocaleString(),
      shop: 'VSeat',
      rating: 5,
      numReviews: 101,
      sold: 1000,
    },
    {
      name: 'Another very very very long name that I need to shorten',
      slug: 'another-very-very-very-long-name-that-I-need-to-shorten',
      category: 'stuff',
      image: '/product-images/example.webp',
      price: l.toLocaleString(),
      shop: 'VSeat',
      rating: 5,
      numReviews: 101,
      sold: 1000,
    },
]
}
export default data;

So basically I need to know how to limit the number of lines and make them appears as dots (...) when they exceed 2 lines

For example:
A very very very long name
Will turn into:
A very very
very long...

This has been bugging me for quite a while now, so any helps would be very appreciated. Thanks

Edit: it seems like I'm kinda close to what I want to achieve. But now I have another problem you may say.
I ran into this answered question not long ago detailing how to literally limit my long texts to 2 lines only. But I now have a problem.
This is how they wrote it in the link I mentioned

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

This is how I wrote it in my styles.js.

twoLines: {
    whiteSpace: 'preline',
    width: '400px',
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    display: '-webkit-box',
    WebkitLineClamp: '2',
    WebkitBoxOrient: 'vertical',
    border: '1px solid #FFFFFF',
  },

for some reason Webkit box, WebkitLineClamp and WebkitBoxOrient doesn't work, is it because I wrote it in the wrong way or what.
It's kinda embarrassing to be confused by this minor detail tbh, but any helps would be great.

Answer 1

This is a CSS problem. Associated with your Typography as it is associated with your Product name. Remove those - from WebKit-box and use simply as webkitbox

Index.js

<Typography
                              style={{
                                fontSize: '12px',
                                color: 'black',
                                fontWeight: 400,
                                marginTop: '10px',
                                text-overflow: 'ellipsis',

                              }}
                            >

As a simple example that I can associate with this.

div.b {
  white-space: nowrap; 
  width: 50px; 
  overflow: hidden;
  text-overflow: ellipsis; 
  border: 1px solid #000000;
  background-color: pink;
}

<h1>text-overflow Property</h1>

<h2>text-overflow: ellipsis:</h2>
<div class="b">Hello world!</div>