Product name on multiple lines

Question

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?

Answer 1

word-wrap: break-word: might help you

https://www.w3schools.com/cssref/css3_pr_word-wrap.asp

Answer 2

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