How to Automatically Shorten Blog Post Descriptions

Memberscripts needed

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

Tutorial

Cloneable

https://webflow.com/made-in-webflow/website/easily-truncate-text

Why/When would need to automatically shorten blog post descriptions?

1. Truncate blog post summaries, product descriptions, etc.

Depending on your needs and the site you’re building, you may sometimes need to truncate text, which means cutting it off after a certain number of characters or words and maybe adding ellipses at the end to indicate that there is more text to be read.

We’re going to look at how you can do just that – cut off text after a specific number of characters and add ellipses at the end of the truncated text.

How to truncate text on your Webflow site

In order to set this up, 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 up the text

First you’ll need to add the attribute ms-code-truncate=”CHARACTER LIMIT” to the text you want to shorten, where you’ll need to add the character limit as the attribute’s value. After the limit you set, ellipses will be added to indicate that the full text has been cut off.

You can use the attribute to also shorten more complex pieces of text that contain things like line breaks and links.

Shortening the text

Now that you’ve set up the text you want truncated, all you need to do is add the MemberScript #18 custom code to your page, before the closing body tag.

Once you’ve added the attribute to the text and the custom code to the page, you’ll see on your published site that the text is now shortened.

Conclusion

That’s all you have to do to truncate text on your Webflow site using a MemberScript.

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 the Scripts

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