How to make the product name shows more characters?

Kamdjou

Hi @devansh-webkul,
Please I will like to customize the way product names are appearing in product list.
as you can see below:

I want to make the names as highlighted here in yellows show more characters than now.

Thanks for the advice.

devansh-webkul

This is handled through CSS in which ellipsis is used.

Kamdjou

@devansh-webkul
Thanks for pointing out.

I have to overwrite the css form the velocity theme velocity.scss from this:

.product-card-new .card-body .product-name, .product-card-new .card-body .product-rating {
    width: 15rem; 
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

To this:

.product-card-new .card-body .product-name, .product-card-new .card-body .product-rating {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

and the result was fantastic as needed

Thanks once more my friend....

Recent Topics

How to make the product name shows more characters?