Limit the amount of characters in excerpt

Hello,

Is there a way that we can control the amount of characters that are displayed in an excerpt, such as a Product or Blog Post excerpt? I want to shorten the amount of words that show up in an excerpt for a certain client.

Let me know if this is possible, thanks!

Hello,

I did a Google search for some CSS that limits character input. Here is what I found:

https://stackoverflow.com/questions/269 ... s/26975271

https://stackoverflow.com/questions/104 ... essing-php

I have tested some of the answers myself to verify that they work as intended.

Can you please be a little bit more specific?

What specific code did you add to make this work? Did you ONLY use CSS, or did you also use Javascript?

A little bit more direction on this would be helpful, thank you.

Hello,

So, I have some additional questions on this...

When I expect the element, I do not see any class or id associated with the excerpts. What do I need to do in CSS to call this correctly? Do I need to use the class 'productname'?

And can you please give a direct example, here within this forum, on the exact CSS and/or Javascript that you used to get this to happen please? The more helpful you can be in here, the more helpful this forum will be for everyone that uses it, not just people who are experienced with CSS.

Let me know, thank you.

This is one of the code snippets that I ran myself:

p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 75ch;
}

In order for me to answer your question regarding the class or ID with the excerpts, I would need you to give me a specific example of what excerpt you want to modify.

Specifically, I want to truncate the PRODUCT excerpts, the ones that show up on the main Products/Store page.

Thank you for your example though, I will test that out soon.

These excerpts are usually within a div or span that has an id or class, so you can try something like:

#id_of_surrounding_element p {
<css here>
}

or:

.class_of_surrounding_element p {
<css here>
}

Hi,

I do NOT see a class or ID that surrounds the specific P. That is why I've been asking for this. Can you please, please give me a direct example??? I would really, really like it if you could be more direct and specific, please.

Is it any of these classes?? Can you please show me an example from your end?

I did some research and found that the p tags are within a div with a class name "product-list". This is what I added:

.product-list p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 75ch;
}

Okay great, thank you. I will try this out when I get a chance this week and I'll let you know what happens.

Thank you for providing a specific example for me. I appreciate it.

Hello,

I just wanted to reply to this to let you know that I have tested this. The code that you provided did not work, so I went off to find my own CSS. This actually does what I had been asking about:

.product-list p {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}

Found this on StackOverflow and the guy said "For a multi line truncation have a look at a flex solution. An example with truncation on 3 rows"
(https://stackoverflow.com/questions/269 ... gth-in-css)

Since the excerpt here is a multi-line truncation, we needed to use the flex. In the code you provided, the "white-space: nowrap;" was truncating to only the one line, no matter how many characters you set the max-width to be. So this sets it per line, rather than per character, which is the better solution in this case.

I just wanted to say all that for future reference on this subject.

I'm glad you found this solution. Thanks for posting it here!