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

Technical Q&A
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.

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.

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,