Hi,
In the screenshot, you can see that the paragraph has three lines. I want to limit it to two lines followed by three dots or an ellipsis.
The line height is 16px.
Screenshot 2 is my current setting.
How do I do it?
Here is my public share link: LINK
(how to access public share link)
hi @Sarowar_Hossain there are very simple ways how to create an excerpt. Here are 3 common methods you can use.
CSS line clamp is widely supported now.
Here’s a nocode approach if you prefer, in your case you’d add the custom attribute wfu-truncate = 2 to your text element. The CSS stylesheet here takes care of the rest.
Thank you so much for your reply.
I have added a custom attribute, but it still won’t work. What am I missing here? Can you kindly check?
https://preview.webflow.com/preview/shproduction?utm_medium=preview_link&utm_source=designer&utm_content=shproduction&preview=9a3ecc2622630ae49e93e8892d2e5fd3&workflow=preview
Can you kindly tell me how I implement this on Webflow?
Did you add the CSS reference? In the docs, at the bottom. That’s the CSS that does the line-clamping work for you.
Thank you for taking the time and creating this video! I appreciate it!
I have created a new tag(screenshot below) and injected the code you have given on the home page. And it won’t work. Should I keep only one tag?
Hi @Sarowar_Hossain if you have more classes selectors you need to add this selector as argument so JS will be able to select element.
const dog = Array.from(document.querySelectorAll(".paragraph.excerpt"));
// !!! no space between .paragraph and .excerpt !!!
This will grab all element with combo-class mean ONLY .paragraph elements that have .excerpt class assigned. You can read articles about CSS specificity.
You can also grab only paragraph with same effect as you getting innerText but in this case all paragraphs will have truncation applied.
You can add to this text element only class excerpt all is up to you.
EDIT:
you have also wrong naming use singular for your classes mean use excerpt and no excerpts
here is code just in case
<script>
const excerpts = Array.from(document.querySelectorAll(".paragraph.excerpt"));
excerpts.forEach(textEl => {
textEl.innerText = textEl.innerText.substring(0, 64) + "..."
})
</script>
I really appreciate your effort, Stan.
Unfortunately, I still can’t get it to work.
I’ve pasted the code into the home screen and also fixed the name.
Can you kindly have a look?
I know it sounds like spoon-feeding, but I am stuck here.
https://preview.webflow.com/preview/shproduction?utm_medium=preview_link&utm_source=designer&utm_content=shproduction&preview=9a3ecc2622630ae49e93e8892d2e5fd3&workflow=preview
hi @Sarowar_Hossain you are using my example without taking in consideration that my code is only example and you should customise it to your needs.
Your selector is paragraph-3 and in my example is paragraph. As I have posted method argument have to be your selectors (class names) that JS will be able to find these. So all you should do to add correct selectors => .paragraph-3.excerpt
If you will in future change element classes ( by adding, removing or renaming) you have to reflect these changes in code to be able select required element. Hope that make sense.
Oh god! I did not notice “paragraph”.
Anyways, It worked! Thank you so much!
