How to hide title after some words

Store Design
, ,
1

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

2

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.

3

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

4

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
HDLShin_0-1715344254488.png1919×788 215 KB

Hope it helps you

Kind regards,
HDL-Shin

5

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

6

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
HDLShin_0-1715344895827.png1902×899 133 KB

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

HDLShin_1-1715344923886.png
HDLShin_1-1715344923886.png1916×934 101 KB

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

7

Dear, It’s not working for me!

Thanks for answering!

8

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
HDLShin_1-1715347670915.png1919×883 214 KB

9

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

10

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