Limit Text

Having a card description that is too long for the card is not something as weird, and yes we can set the text length up in our CMS but that option doesn't always fit our needs, so here's my take on this issue

Loads
CDN ScriptDocumentationExample

Copy the Limit Text <script> and paste into the <head> of your page

<!-- [Webflow Trickery by CodeRaccoons]  -->
<script async src= "https://cdn.jsdelivr.net/gh/TheCodeRaccoons/WebflowTrickery@1.0.0/Dist/Functional/LimitText.min.js" ></script>
Copy Script

Required attributes

I want this text element to be limited to x characters
Attribute to add
Name
wt-limittext-element
Value
text
Instructions

Add this attribute to the text element you want to limit.

This will automatically set the text to 300 characters and add suspension points after the character limit has been reached.

Note that the output will be the character count minus 3 characters, adding 3 suspension points at the end.

How does it look?
Optional
I want the text to be limited to this length
Attribute to add
Name
wt-limittext-length
Value
{250}
Instructions

This value defaults to 300, if added the text will be limited to the specified length.

How does it look?
Optional
I want this to be the custom suffix after the limited text
Attribute to add
Name
wt-limittext-suffix
Value
{suffix}
Instructions

The contents of this attribute will be added at the end of the limited text.

Note that this suffix will be a just a text, not a link or other.

How does it look?

Optional Attributes

I want this text element to be limited to x characters
Attribute to add
Name
wt-limittext-element
Value
text
Instructions

Add this attribute to the text element you want to limit.

This will automatically set the text to 300 characters and add suspension points after the character limit has been reached.

Note that the output will be the character count minus 3 characters, adding 3 suspension points at the end.

How does it look?
Optional
I want the text to be limited to this length
Attribute to add
Name
wt-limittext-length
Value
{250}
Instructions

This value defaults to 300, if added the text will be limited to the specified length.

How does it look?
Optional
I want this to be the custom suffix after the limited text
Attribute to add
Name
wt-limittext-suffix
Value
{suffix}
Instructions

The contents of this attribute will be added at the end of the limited text.

Note that this suffix will be a just a text, not a link or other.

How does it look?

Working examples

Need more?

Do you need multiple instances of this Attribute?

All of our attributes follow the same structure for multiple instances!

In order to use multiple instances on an attribute add -n at the end of the value of the element attribute. being "n" a unique number.

This unique number is how we can tell between multiple instances.

For example, container-2, trigger-2, and target-2 will all be connected to the same instance.

This is what you need to add multiple instances of this:

First attribute instance
No items found.
Second instance
No items found.
Third instance
No items found.