How to Truncate product title on collection page?

[Arif_lr171]

Hi Everyone,

How can I truncate the product title on my collection page?

Please specify the line of code that I need to do the changes to since I am a new learner in the coding world.

I am currently using: Impulse theme 2.0. website: www.Locknlock.in

Following is the screenshot of the same:

Thank you,

Arif

[ZestardTech]

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset >theme.css and paste this at the bottom of the file:

.grid-product__title.grid-product__title--heading {
min-height: 28px;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
}

[Arif_lr171]

Hello, Thank you for replying it’s working. I just need to understand one more thing.

Currently, the next line title text is hidden but on the collection page some part of it is still showing up (just the top edge of text). How can I remove that?

I want something just like " Red Cap…"

Let me know if you need any other clarification, please check the below image:

Thanks!

[ZestardTech]

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset >theme.css and paste this at the bottom of the file:

.grid-product__title.grid-product__title--heading {
min-height: 28px;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
}
@media screen and (max-width:480px){
.grid-product__title.grid-product__title--heading {
min-height: 25px;
}
}