How can I limit my product title to 19 letters on the homepage?

[David235]

My product has too many titles displayed on the homepage. Can I change the code and set the title to 19 letters?
https://www.whicestyle.com/

[Hardik29418]

Please provide website url and if your store is password protected then also provide password

[dmwwebartisan]

@David235

Please add the following code at the bottom of your assets/theme.scss.liquid file.

h3.product-title>a{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

Hope this works. This is for the collection page.

Thanks!

[David235]

Didn’t play any role,

[David235]

Website is on top

[David235]

Find the theme code: product-grid-item.liquid ,Add in (

{{ product.title) | truncate:19 This code 19 number represents the letter length of the name。
I did not find these codes

[dmwwebartisan]

@David235

You mean the above code is not working?

Did you tried to put that. Let me know.

Thanks!

[David235]

Yes, I tried, I didn’t find that directory

##-请在此行上方输入您的回复-##

[dmwwebartisan]

@David235

See below, is it not correct ?

[David235]

I found it and added the code, he caused the overlap to see picture 1

[dmwwebartisan]

@David235

I can see your second screenshot. You have drawn a rectangle but can’t see code there. The code should work.

Thanks!

[David235]

No, no, I just added the code, which caused the product name in Figure 1 to overlap, so I deleted it.

[David235]

@dmwwebartisan No, no, I just added the code, which caused the product name in Figure 1 to overlap, so I deleted it.

[dmwwebartisan]

@David235

Can you put that again?

I will check. You want the product title in one line right?

Like I have shown in my previous screenshot ?

[David235]

@dmwwebartisan yes,But I added the code, and the product titles on the homepage overlapped

[dmwwebartisan]

@David235

Let me see.

Thanks!

[David235]

@dmwwebartisan This is what it looks like after adding the code

[dmwwebartisan]

@David235

That’s strange. Here is the home page screenshot from my side.

[David235]

@dmwwebartisan @I have deleted the code now, if I add it, it will be the same as the picture I sent yo

[David235]

@dmwwebartisan I have added the code now, you can check again