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

[Yusa1]

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

On my website it shows the whole title

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

[dannyelo · Accepted solution]

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:

Hope this helps.

[dannyelo · Accepted solution]

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.

[dannyelo · Accepted solution]

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:

Hope this helps.

[Yusa1]

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.

[dannyelo · Accepted solution]

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.

[Yusa1]

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

[dannyelo · Accepted solution]

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,