I'm currently developing an online store using NextJS and Material UI.
The issue I encountered is related to the long product names that are causing my Card component to stretch. As shown in this image:
https://i.sstatic.net/07qNm.png
If you observe closely, you'll notice that the prices of some products are not aligned properly.
Here's a snippet of code from my index.js and data.js files where I manage the product 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;
I'm seeking assistance on how to truncate long product names to display only 2 lines and replace the rest with ellipsis (...)
For instance:
A very very very long name
Should appear as:
A very very
very long...
This issue has been bothering me for quite some time now, so any insights would be highly appreciated. Thank you
Edit: I believe I've made progress towards achieving my goal but encountered another hurdle along the way.
Recently, I stumbled upon a detailed explanation on limiting text to 2 lines only in this answered question. However, I have encountered a problem.
This is how it was mentioned in the provided link:
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
And here is how I implemented it in my styles.js file:
twoLines: {
whiteSpace: 'preline',
width: '400px',
overflow: 'hidden',
textOverflow: 'ellipsis',
display: '-webkit-box',
WebkitLineClamp: '2',
WebkitBoxOrient: 'vertical',
border: '1px solid #FFFFFF',
},
Unfortunately, it seems that Webkit box, WebkitLineClamp, and WebkitBoxOrient are not functioning as expected. Is there a mistake in how I wrote them or any other reason for their malfunctioning?
It's slightly embarrassing to get stuck on such a minor detail, but any guidance would be greatly appreciated.