how to limit the product title in one line on collection page? my theme is taste

[momo110]

the product title on collection page is fully presented and I will want it to be display only one row without changing font size. it will end with "..." if the title exceeds one row. Here is my website: https://jonvidesign.com/ and attached photo is what I want.

[oscprofessional · Accepted solution]

Hello @momo110 

1. From your Shopify admin, navigate to Online Store > Themes.
2. Find the Testament theme and click Actions > Edit code.
3. In the Assets folder, navigate to the base.css  file.
   
4. Add the following css code at the end 

.card__heading a {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 350px;
width: 100%;
}

I hope this helps!
Thanks

[oscprofessional · Accepted solution]

Hello @momo110 

1. From your Shopify admin, navigate to Online Store > Themes.
2. Find the Testament theme and click Actions > Edit code.
3. In the Assets folder, navigate to the base.css  file.
   
4. Add the following css code at the end 

.card__heading a {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 350px;
width: 100%;
}

I hope this helps!
Thanks

[momo110]

Hello sir, it works on pc device but it seems that something is wrong on mobile. kindly check

[momo110]

[niraj_patel]

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (max-width: 767px) {
.card__heading a {
max-width: 26% !important;
}
}
</style>
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[momo110]

it looks not long enough and also affects price position, pls have a look

[Raj-webdesigner · Accepted solution]

Add This css In you edit Code > base.css file

.card__heading a {
  display: -webkit-box;
  -webkit-line-clamp: 1;
    max-width: 350px;
  text-overflow: ellipsis " [..]";
  -webkit-box-orient: vertical;
  overflow: hidden;
}

Try This Code This Code Work On Mobile Also

[niraj_patel]

Hello @momo110 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
 .collection h3.card__heading.h5 a {
       width: 100%;
       max-width: 69%;
       white-space: nowrap;
       text-overflow: ellipsis;
       overflow: hidden;
  }
</style>

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.