When the Product Title is to long it shows 3 dots ... at the end it doesn't continue On PC/MOBILE

Technical Q&A

Topic summary

Goal: Truncate long product titles with an ellipsis on mobile and desktop.

Solution provided: Add CSS to the product title element (.full-unstyled-link) using overflow:hidden, display:-webkit-box, -webkit-box-orient:vertical, and -webkit-line-clamp to limit visible lines. Initially applied within a mobile media query (max-width: 768px) for 3 lines.

Adjustment: To show fewer lines (2 instead of 3), change -webkit-line-clamp from 3 to 2.

Desktop application: Remove the @media query so the CSS applies site-wide (PC and mobile) with -webkit-line-clamp: 2.

Technical notes:

  • -webkit-line-clamp limits the number of lines shown and, combined with the other properties, produces an ellipsis for overflow.
  • A media query restricts styles to specific screen sizes; removing it applies styles globally.

Outcome: The user confirmed the fix works (2-line truncation) and can be applied to PC by removing the media query. Screenshots illustrate the before/after truncation effect. The discussion is resolved.

Summarized with AI on January 24. AI used: gpt-5.
1

Hello, I’m trying to make the Product Title To Diminish When there’s a lot of words On PC/MOBILE

Website - https://avokitchen.com/

EXAMPLE - I want it to be like this

Yusa1_0-1688933584994.jpeg
Yusa1_0-1688933584994.jpeg300×400 17.7 KB

On my website it shows the whole title

Yusa1_1-1688933585183.jpeg
Yusa1_1-1688933585183.jpeg300×400 22.3 KB

I will gladly appreciate if someone can help me on this.

2

Hello!

You need to add this styles in your custom code stylesheet.

@media screen and (max-width: 768px) {
  .full-unstyled-link {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }
}

Result:

dannyelo_0-1688957210782.png
dannyelo_0-1688957210782.png1134×1664 231 KB

Hope this helps.

1 Like
3

Hello Danny, thanks so much. Was wondering if those 3 dots could show up sooner like that there would be 2 row instead of 3.

4

You are welcome my Yusa!

Yes, all you have to do is change the property:

-webkit-line-clamp: 3;

This determines the number of lines desired, change the 3 for a 2. And there you have it.

1 Like
5

Thank you it helped. Is there a way to apply this to PC too

6

You are welcome!

Yes you can, just remove the media statement. Leave it like this.

.full-unstyled-link {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

Best,