How to keep all descriptions the same length in Webflow
Other use-cases using Memberscript #8
Memberscripts needed
Tutorial:
Cloneable
Why/Use Cases –
- Ensure a pleasing aesthetic on your page by having all blog post summaries, product descriptions, etc. be the same length.
How to keep all descriptions the same length in Webflow
If, for example, you’ve got multiple links to articles on your page, all with excerpts from the articles, you’re going to want to make sure the truncated excerpts are all the same length, so it looks nicer.
This guide will help you truncate texts and keep your excerpts or descriptions the same length.
To have all descriptions be the same length on your Webflow site, we’re going to use MemberScript #18 – Easily Truncate Text. Follow the link to get the code you’ll need to add to your page and watch a video tutorial on how to set everything up.
Setting it up
All you need to do is add the following attribute to the text you want to truncate:
· ms-code-truncate=”VALUE” – use the number of characters you want to display as the value.
Once the text reaches the set number of characters, ellipses will be added to indicate to users that the text has been truncated.
Making it work
Now that you’ve got everything set up in Webflow, all you need to do is add the MemberScript #18 custom code to your page, before the closing body tag.
Conclusion
That’s all there is to it, you can now test the descriptions on your live site and they should all have the same length.
If you want to use our demo project to get you started, just click the button below to add it to your project.
Take me to cloneable!
Written by
Ovidiu
Contributor