One Line Product Title on Collections,Featured Products

VogueVerve
Visitor
2 0 0

Hi everyone I'm using dawn theme and trying to limit product title to in one line but when I use this code;

.card__heading {
margin-top: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: inline-block;
max-width: 202px;
}

Product title is not exactly starting from the left side of the card and also it crosses card's right border

you can check it : vogueverve.com psw: VogueVerve

Screenshot 2023-02-16 at 10.20.39 PM.png

Replies 3 (3)

EcomGraduates
Shopify Partner
588 48 79

Helllo there  

 

to  truncate text to one line, 

  1. Add the following CSS code to your theme's stylesheet: 

 

.truncate-one-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

 

This CSS code sets the white-space property to "nowrap" to prevent the text from wrapping to a new line, sets the overflow property to "hidden" to hide any overflowed text, and sets the text-overflow property to "ellipsis" to add an ellipsis at the end of the truncated text.

 

VogueVerve
Visitor
2 0 0

unfortunately it didn't change anything

BSS-Commerce
Shopify Expert
3477 461 518

Hi @VogueVerve 

We just checked on your website and found that your problem has been resolved. The Product Titles have not exceeded the right margin.

view (2).png

If you still have any issues, please let us know with detailed description, URL page, and screenshots. We're happy to support you.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development