Limit the amount of characters in excerpt

Need help? Please give a detailed explanation of your problem.
Post Reply
User avatar
Agalassi1792
AllPro Expert
AllPro Expert
Posts: 493
meble kuchenne Mikołów Knurów Czechowice-Dziedzice
Joined: Tue Nov 18, 2014 12:42 pm
Website: apwt.bluezenith.com

Limit the amount of characters in excerpt

Post 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!
User avatar
Benjaminh326
AllPro Provider
AllPro Provider
Posts: 29
Joined: Wed May 08, 2019 10:35 am
Website: www.allprowebtools.com

Re: Limit the amount of characters in excerpt

Post 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.
User avatar
Agalassi1792
AllPro Expert
AllPro Expert
Posts: 493
Joined: Tue Nov 18, 2014 12:42 pm
Website: apwt.bluezenith.com

Re: Limit the amount of characters in excerpt

Post 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.
User avatar
Agalassi1792
AllPro Expert
AllPro Expert
Posts: 493
Joined: Tue Nov 18, 2014 12:42 pm
Website: apwt.bluezenith.com

Re: Limit the amount of characters in excerpt

Post 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.
User avatar
Benjaminh326
AllPro Provider
AllPro Provider
Posts: 29
Joined: Wed May 08, 2019 10:35 am
Website: www.allprowebtools.com

Re: Limit the amount of characters in excerpt

Post 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.
User avatar
Agalassi1792
AllPro Expert
AllPro Expert
Posts: 493
Joined: Tue Nov 18, 2014 12:42 pm
Website: apwt.bluezenith.com

Re: Limit the amount of characters in excerpt

Post 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.
User avatar
Benjaminh326
AllPro Provider
AllPro Provider
Posts: 29
Joined: Wed May 08, 2019 10:35 am
Website: www.allprowebtools.com

Re: Limit the amount of characters in excerpt

Post 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>
}
User avatar
Agalassi1792
AllPro Expert
AllPro Expert
Posts: 493
Joined: Tue Nov 18, 2014 12:42 pm
Website: apwt.bluezenith.com

Re: Limit the amount of characters in excerpt

Post 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?
Attachments
APWT-examing.jpg
APWT-examing.jpg (36.27 KiB) Viewed 1519 times
User avatar
Benjaminh326
AllPro Provider
AllPro Provider
Posts: 29
Joined: Wed May 08, 2019 10:35 am
Website: www.allprowebtools.com

Re: Limit the amount of characters in excerpt

Post 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;
}
User avatar
Agalassi1792
AllPro Expert
AllPro Expert
Posts: 493
Joined: Tue Nov 18, 2014 12:42 pm
Website: apwt.bluezenith.com

Re: Limit the amount of characters in excerpt

Post 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.
User avatar
Agalassi1792
AllPro Expert
AllPro Expert
Posts: 493
Joined: Tue Nov 18, 2014 12:42 pm
Website: apwt.bluezenith.com

Re: Limit the amount of characters in excerpt

Post 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.
User avatar
Benjaminh326
AllPro Provider
AllPro Provider
Posts: 29
Joined: Wed May 08, 2019 10:35 am
Website: www.allprowebtools.com

Re: Limit the amount of characters in excerpt

Post by Benjaminh326 »

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