Ellipsis in webflow: Paragraph, texts restricted into two lines

Don’t repeat the code, the library only needs to be loaded once.
Than use wfu-truncate on any text element you want.

OK - I think because I used the CSS version in response to Michael Wells above - but I will try using the library again. First time around it didn’t work but I will try again.

1 Like

Thanks for reminding me, I’m not sure where my CSS style chunk notes have gone in the SA5 docs, I’ll look at re-adding that.

But either way, it’s the same, you’d only re-use the attribute. The library references the CSS externally ( more convenient ), but the HTML embedded CSS approach brings that into the page ( better design-time experience ).

Either way the mechanism is the same, just add wfu-truncate where you like.

Note if you use the library, you won’t see the truncation in the designer, only on the published site.

1 Like

Amazing ! It’s been so long that i tried different solutions found on the web. Its working perfectly ! thx

Attention that with the first solution (defining the number of carachters) it’s not good as depending on the screen size you will have different numbers of carachters.

@memetican solution is the best and works perfectly. (just defining the number of lines)

What do you mean with that? This is not true! The first example shows only how it works that is why I provide 3 examples. You only need set it once (a few characters of code in one line). IMO I would not call it not good solution as it is plain javaScript. If you need for some reasons different number of characters on small viewport you just adjust it in media query as you will do by setting different number of lines. :man_shrugging:

I’ve added the cdn to the head tag

<!-- Sygnal Attributes 5 | HTML --> 
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sygnaltech/webflow-util@5.3.19/dist/css/webflow-html.css"> 
<script defer src="https://cdn.jsdelivr.net/gh/sygnaltech/webflow-util@5.3.19/dist/nocode/webflow-html.js"></script>

and have added the wfu-truncate = 3 custom attribute to the field I want truncated but it does not seem to function correctly on my published site

Hi @Andrew_Taghi , I can’t possibly guess without digging into your project.
This particular implementation of CSS line clamping is extremely simple.
A few things;

  • Make certain it’s on the text element itself, and not a wrapper
  • Make certain it’s a custom attribute you’ve created, not a style or something else
  • Check the docs
  • The SA5 forum is at the top of the docs

Screenshot 2024-04-02 at 8.23.18 AM

I have it on the p element and have also applied the custom attribute but it doesn’t seem to truncate the text. Could it be due the content of the paragraph being pulled from a CMS?

No, it doesn’t matter. The line-clamping is handled client-side in CSS.
Since it’s a library, you will only see it applied in the published site, not in the designer.

Hi Michael, unfortunately I am not able to get the attribute to function. I’ve added the recommended scrip tag from the get started page into the head tag of my pages settings and also added the custom attribute “wfu-truncate” and the value of “2” but am still not able to see the content truncated. It is on a p tag but I also tried it on an h1 tag in that page and another page, where I also pasted the script, but still no luck.

Are there any steps that I may be missing? I am able to create my own custom script that gets the number of characters and truncates them as well as adds an ellipsis(…) but I would prefer to go by the number of lines like you have created.

I can’t guess what you have in your project, but it’s an extremely simple setup-
One library, one attribute.

I’d recommend you look at the cloneable and compare it to your setup.
Again, SA5 has its own forum for support.

https://webflow-smart-elements.webflow.io/line-clamping

Try this, it works really well for me.

First, add a Code Embed anywhere on the page (just hide it if it’s on a grid).

Second, add this line of code:

<style>
.limit-char {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>

Third, add the class “limit-char” on your paragraph of choice. Done!

Note: Changing the number here “-webkit-line-clamp: 2;” adds or subtracts a line in your paragraph. Oh, and it has a “…” already if truncated. Hope this helps! Cheers

1 Like

BRO THANKS SO MUCH!
This works really well!