How to hide title after some words

Bhanupratap
Excursionist
43 0 9

How to hide title after some words, like My title is long and I don't want to show my full title on my product grid, for ex: My title length is 50 words but I just want to show starting 20 words for all product grid.

Like This Website: https://prnt.sc/WFr1lj17B6yw

Thanks

Replies 9 (9)

HDL-Shin
Shopify Partner
80 20 15

Hi @Bhanupratap
Can you kindly share your store link (with the password, if any) with us? I will check it and suggest you a solution if possible.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
♥️♥️♥️ HDL-Shin || Shopify Partner ♥️♥️♥️
Bhanupratap
Excursionist
43 0 9

Thanks for answering dear, but I can't able to share my store link due to unique designs for products.

HDL-Shin
Shopify Partner
80 20 15

Hi @Bhanupratap
I tried this code in my store and it worked, you can try it in your store 

 

a#CardLink-template--21849437569319__featured_collection-8743249117479 {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 250px;
}

 

HDLShin_0-1715344254488.png

Hope it helps you

Kind regards, 
HDL-Shin

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
♥️♥️♥️ HDL-Shin || Shopify Partner ♥️♥️♥️
Bhanupratap
Excursionist
43 0 9

Thanks for the code but where I need to apply this code in my theme?

HDL-Shin
Shopify Partner
80 20 15

Hi @Bhanupratap ,

You can try this code by following these steps:

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

HDLShin_0-1715344895827.png

Step 2: Search file base.css,  theme.css or styles.css 

HDLShin_1-1715344923886.png

Step 3: Insert that code at the bottom of the file -> Save

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
♥️♥️♥️ HDL-Shin || Shopify Partner ♥️♥️♥️
Bhanupratap
Excursionist
43 0 9

Dear, It's not working for me!

Thanks for answering!

HDL-Shin
Shopify Partner
80 20 15

Hi @Bhanupratap,
Perhaps your class name is different from mine, causing the code to be applied incorrectly. Can you take a photo for me with your code for the title? I can help you

HDLShin_1-1715347670915.png

 


 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
♥️♥️♥️ HDL-Shin || Shopify Partner ♥️♥️♥️
Bhanupratap
Excursionist
43 0 9

Dear code is working well in desktop but not in mobile. In Mobile it look like this: https://prnt.sc/ef-VffE6X_jT

HDL-Shin
Shopify Partner
80 20 15

Hi @Bhanupratap
Probably because the aspect ratio of each screen is different, you can try add this code for mobile : 

@media only screen and (max-width: 767px) {
  .your_name_class_title {
    width: 150px !important;
  }
}

Hope this can help you
Kind regards,

HDL-Shin

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
♥️♥️♥️ HDL-Shin || Shopify Partner ♥️♥️♥️