How to keep all descriptions the same length in Webflow

Other use-cases using Memberscript #8

• https://www.memberstack.com/blog/how-to-automatically-shorten-blog-post-descriptions

Memberscripts needed

1. https://www.memberstack.com/scripts/easily-truncate-text

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!‍