0

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?

0

word-wrap: break-word: might help you

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

1
  • 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
    Jul 28 at 10:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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