Truncate Product Title - Kingdom Theme

[Selvence]

Hello, I need to truncate my product titles on the Kingdom theme. 

What would be the css code to shorten these titles and how do I install it into my code edit? Thanks!

selvence.com 

[Muhammad_Ali_S]

Add this at the bottom of theme.css file.

You can change the number of lines by changing 3 to as per your need, -webkit-line-clamp: 3;

#main-collection-product-grid .product-item__title {
     display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
     overflow: hidden;
}

Do let me know if it works for you.

Good Luck!

[oscprofessional]

hi @Selvence 

One option to do this by adding the below css in theme.css file

.product-item__title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

or else you can perform changes in your product file..
you can follow this https://shopify.github.io/liquid/filters/truncate/

Let me know if this  helps you..

Thanks

[KetanKumar]

@Selvence 

sorry for that issue can you please update this

Find this 
{{ product.title }}
to
upate this 
{{ product.title | truncate: 10 }}