How to hide title after some words

[Bhanupratap]

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

[HDL-Shin]

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.

[Bhanupratap]

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

[HDL-Shin]

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;
}

Hope it helps you

Kind regards, 
HDL-Shin

[Bhanupratap]

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

[HDL-Shin]

Hi @Bhanupratap ,

You can try this code by following these steps:

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

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

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

[Bhanupratap]

Dear, It's not working for me!

Thanks for answering!

[HDL-Shin]

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

[Bhanupratap]

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]

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