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!
Limit the amount of characters in excerpt
- Agalassi1792
- AllPro Expert
- Posts: 510
- meble kuchenne Mikołów Knurów Czechowice-Dziedzice
- Joined: Tue Nov 18, 2014 12:42 pm
- Website: apwt.bluezenith.com
- Benjaminh326
- AllPro Provider
- Posts: 29
- Joined: Wed May 08, 2019 10:35 am
- Website: www.allprowebtools.com
Re: Limit the amount of characters in excerpt
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.
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.
- Agalassi1792
- AllPro Expert
- Posts: 510
- Joined: Tue Nov 18, 2014 12:42 pm
- Website: apwt.bluezenith.com
Re: Limit the amount of characters in excerpt
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.
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.
- Agalassi1792
- AllPro Expert
- Posts: 510
- Joined: Tue Nov 18, 2014 12:42 pm
- Website: apwt.bluezenith.com
Re: Limit the amount of characters in excerpt
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.
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: 29
- Joined: Wed May 08, 2019 10:35 am
- Website: www.allprowebtools.com
Re: Limit the amount of characters in excerpt
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.
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.
- Agalassi1792
- AllPro Expert
- Posts: 510
- Joined: Tue Nov 18, 2014 12:42 pm
- Website: apwt.bluezenith.com
Re: Limit the amount of characters in excerpt
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.
Thank you for your example though, I will test that out soon.
- Benjaminh326
- AllPro Provider
- Posts: 29
- Joined: Wed May 08, 2019 10:35 am
- Website: www.allprowebtools.com
Re: Limit the amount of characters in excerpt
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>
}
#id_of_surrounding_element p {
<css here>
}
or:
.class_of_surrounding_element p {
<css here>
}
- Agalassi1792
- AllPro Expert
- Posts: 510
- Joined: Tue Nov 18, 2014 12:42 pm
- Website: apwt.bluezenith.com
Re: Limit the amount of characters in excerpt
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 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 (36.27 KiB) Viewed 11763 times
- Benjaminh326
- AllPro Provider
- Posts: 29
- Joined: Wed May 08, 2019 10:35 am
- Website: www.allprowebtools.com
Re: Limit the amount of characters in excerpt
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;
}
.product-list p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 75ch;
}
- Agalassi1792
- AllPro Expert
- Posts: 510
- Joined: Tue Nov 18, 2014 12:42 pm
- Website: apwt.bluezenith.com
Re: Limit the amount of characters in excerpt
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.
Thank you for providing a specific example for me. I appreciate it.
- Agalassi1792
- AllPro Expert
- Posts: 510
- Joined: Tue Nov 18, 2014 12:42 pm
- Website: apwt.bluezenith.com
Re: Limit the amount of characters in excerpt
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 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: 29
- Joined: Wed May 08, 2019 10:35 am
- Website: www.allprowebtools.com
Re: Limit the amount of characters in excerpt
I'm glad you found this solution. Thanks for posting it here!