Limit the amount of characters in excerpt

Need help? Please give a detailed explanation of your problem.
User avatar
Agalassi1792
AllPro Expert
Posts: 408
Joined: Tue Nov 18, 2014 12:42 pm
Website: apwt.bluezenith.com

Limit the amount of characters in excerpt

Postby Agalassi1792 » Wed Jun 12, 2019 4:17 pm

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

Re: Limit the amount of characters in excerpt

Postby Benjaminh326 » Thu Jun 13, 2019 8:59 am

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
Posts: 408
Joined: Tue Nov 18, 2014 12:42 pm
Website: apwt.bluezenith.com

Re: Limit the amount of characters in excerpt

Postby Agalassi1792 » Thu Jun 13, 2019 9:14 am

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
Posts: 408
Joined: Tue Nov 18, 2014 12:42 pm
Website: apwt.bluezenith.com

Re: Limit the amount of characters in excerpt

Postby Agalassi1792 » Fri Jun 14, 2019 10:21 am

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.



Benjaminh326
AllPro Provider
Posts: 12
Joined: Wed May 08, 2019 10:35 am
Website: www.allprowebtools.com

Re: Limit the amount of characters in excerpt

Postby Benjaminh326 » Mon Jun 17, 2019 8:31 am

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
Posts: 408
Joined: Tue Nov 18, 2014 12:42 pm
Website: apwt.bluezenith.com

Re: Limit the amount of characters in excerpt

Postby Agalassi1792 » Mon Jun 17, 2019 8:51 am

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.



Benjaminh326
AllPro Provider
Posts: 12
Joined: Wed May 08, 2019 10:35 am
Website: www.allprowebtools.com

Re: Limit the amount of characters in excerpt

Postby Benjaminh326 » Mon Jun 17, 2019 9:06 am

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
Posts: 408
Joined: Tue Nov 18, 2014 12:42 pm
Website: apwt.bluezenith.com

Re: Limit the amount of characters in excerpt

Postby Agalassi1792 » Mon Jun 17, 2019 9:33 am

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 130 times



Benjaminh326
AllPro Provider
Posts: 12
Joined: Wed May 08, 2019 10:35 am
Website: www.allprowebtools.com

Re: Limit the amount of characters in excerpt

Postby Benjaminh326 » Mon Jun 17, 2019 10:25 am

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
Posts: 408
Joined: Tue Nov 18, 2014 12:42 pm
Website: apwt.bluezenith.com

Re: Limit the amount of characters in excerpt

Postby Agalassi1792 » Tue Jun 18, 2019 9:42 am

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
Posts: 408
Joined: Tue Nov 18, 2014 12:42 pm
Website: apwt.bluezenith.com

Re: Limit the amount of characters in excerpt

Postby Agalassi1792 » Thu Jun 20, 2019 1:39 pm

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.



Benjaminh326
AllPro Provider
Posts: 12
Joined: Wed May 08, 2019 10:35 am
Website: www.allprowebtools.com

Re: Limit the amount of characters in excerpt

Postby Benjaminh326 » Fri Jun 21, 2019 12:09 pm

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

Return to “Help / How to use AllProWebTools”



Who is online

Users browsing this forum: No registered users and 3 guests

cron