How can I wrap Product Title Text To Single Line

[mukukaje]

Hi Support,

I am trying to wrap my product title text that have multiple lines into a single line for my store. This would help improve my store appearance. It would be nice to have the text wrapped to a 16 character cut off so the rest of the product title text in the product card can be hidden off and not overflowing in the next line. See image attached for the issue. I am using the Refresh theme.

The issue:

And here is an image of what I want the titles to look like with the rest of the titles trailing off but hidden away:

[KetanKumar]

@mukukaje 

Thank you for reaching out and posting this question!
Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

[mukukaje]

Hi Ketan,

Thanks for the quick repky.

Site URL is: https://www.mangozambia.com/

[KetanKumar]

@mukukaje 

can you please confirm 

[mukukaje]

Yes thats the one. I comfirm.

[KetanKumar]

@mukukaje yes please  add this code
1. Go to Online Store->Theme->Edit code
2. Asset->/component-card.css ->paste below code at the bottom of the file.
I hope that helps you out! Best of luck 😊

.card--standard>.card__content .card__information {
    padding-left: 1.7rem;
    padding-right: 1.7rem;
}

[mukukaje]

Hi @KetanKumar thanks for the solution, however i am not trying to add text padding to my product headings and titles in the product cards. I am trying to truncate the product card heading title text to a single line with a character limit of 16 characters or the width of the product card to prevent the product headings from overflowing into multiple lines if that makes sense.

[KetanKumar]

@mukukaje  oh sorry for that can you try this code

{{ product.title | truncate: 16 }}

[Villydev]

How do i align my product title to be on the same line so the buttons can be on the same line too? 

[KetanKumar]

@Villydev oh sorry for that issue can you please share your store url so i will check and update you.