I am using Magento 2.4.2 and the latest porto theme and i would line the product name to be listed on 2 lines and then if still longer then show an ellipsis. I would like to do this anywhere where i have the grid option to display products like the category page and by bestsellers and latest products grid. I would like to do this with CSS and not hide any text using PHP for SEO reasons. For example, at the moment i have:

This is my long...

What i would like is:

This is my
long product ...

Where the full product name would be "This is my long product name". Maybe i have to use a combination of PHP and CSS but i dont want to limit the string using PHP but i could use it to split the line at a certain point which should match the product width.

EDIT: I think i need to use:

.products-grid .product-item .product-item-details .product-item-name {
    /* autoprefixer: off */
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    white-space: normal !important;

But when adding this even styles-m-min.css still takes priority and i cant find the correct .less file to edit that. Does anyone know which LESS file as the .product-item-name class in?

2 Answers 2


word-wrap: break-word: might help you


  • I tried that, but it didnt seem to perform exactly as i wanted. I could try again incase i messed it up somehow.
    – Alex Smith
    Commented Jul 28, 2021 at 10:30

You can fix this by using some CSS codes.

Magento 2 uses less file so you can also use less type as follows below step.

Create new file at Vendor/Module/view/adminhtml/web/css/source/_module.less

Then add

 .catalog-product-index {
    .data-grid-cell-content.white-space-preserved {
        white-space: initial;
        inline-size: 250px

After than run

rm -rf var/view_preprocessed/
rm -rf pub/static/adminhtml
php bin/magento setup:static-content:deploy

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.