One Line Product Title on Collections,Featured Products

Store Design
1

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
Screenshot 2023-02-16 at 10.20.39 PM.png1062×678 486 KB

2

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.

3

unfortunately it didn’t change anything

4

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
view (2).png1085×1023 254 KB

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