Page 1 of 1

Limit the amount of characters in excerpt

Posted: Wed Jun 12, 2019 4:17 pm
by Agalassi1792
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!

Re: Limit the amount of characters in excerpt

Posted: Thu Jun 13, 2019 8:59 am
by Benjaminh326
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.

Re: Limit the amount of characters in excerpt

Posted: Thu Jun 13, 2019 9:14 am
by Agalassi1792
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.

Re: Limit the amount of characters in excerpt

Posted: Fri Jun 14, 2019 10:21 am
by Agalassi1792
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.

Re: Limit the amount of characters in excerpt

Posted: Mon Jun 17, 2019 8:31 am
by Benjaminh326
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.

Re: Limit the amount of characters in excerpt

Posted: Mon Jun 17, 2019 8:51 am
by Agalassi1792
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.

Re: Limit the amount of characters in excerpt

Posted: Mon Jun 17, 2019 9:06 am
by Benjaminh326
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>
}

Re: Limit the amount of characters in excerpt

Posted: Mon Jun 17, 2019 9:33 am
by Agalassi1792
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?

Re: Limit the amount of characters in excerpt

Posted: Mon Jun 17, 2019 10:25 am
by Benjaminh326
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;
}

Re: Limit the amount of characters in excerpt

Posted: Tue Jun 18, 2019 9:42 am
by Agalassi1792
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.

Re: Limit the amount of characters in excerpt

Posted: Thu Jun 20, 2019 1:39 pm
by Agalassi1792
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.

Re: Limit the amount of characters in excerpt

Posted: Fri Jun 21, 2019 12:09 pm
by Benjaminh326
I'm glad you found this solution. Thanks for posting it here!