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!
Awesome and very easy solution! Thanks so much. Just wondering, is there any way to use this method with greater than 5 lines (i.e. set the attribute to say, 10 lines?)
Yes, we support 1 to 5 in the library, since more than that is a bit atypical.
But you can just add an HTML embed to your page;
<style>
[wfu-truncate="10"] {
-webkit-line-clamp: 10;
}
</style>
In fact if that’s the only feature of WFU you’re using, you can remove the library altogether and embed;
<style>
[wfu-truncate] {
position: relative;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
[wfu-truncate="10"] {
-webkit-line-clamp: 10;
}
</style>
Awesome! Thanks so much 
And agreed that it is a bit atypical, and I don’t even have an exact use case for it at the moment, but was just hoping to better understand the solution and how it works - what you provided is perfect.
Will try these out soon. Cheers 
Ah sweet, also, Sygnal Attributes has always been open source for the community, you can find this particular feature here, It’s a very simple bit of CSS.
Hi Michael,
I’ve tried the solution and I can’t get it to work. I must be doing blindingly obvious wrong, but I just can’t figure it out. Would you mind helping?
I’ve added the link to the HEAD of my page:
I then added the wfu-truncate = 3 as an attribute:
Yet when I publish the site it doesn’t truncate:
Any idea what I may be doing wrong? Any help would be appreciated it. Thank you.
My read-only link is:
Hey FRNZY, the wfu-truncate = 3 isn’t a style, it’s a custom attribute setting.
You’ll find those towards the bottom of the element’s settings panel ( gear icon, top right )
I’m such a muppet. Thank you. It works like a charm.
