How to Truncate Text in Webflow Easily

Introduction

In this tutorial, Sandro, cofounder of the Gemeos Webflow agency, shows you how to easily truncate text in Webflow.

Truncating text can be super useful for a few reasons, especially when you want to keep your Hub pages consistent, like blog pages, guides, articles, and more. It helps keep the layout consistent no matter how long your text is (see image below).

Here’s how you can do the same in under 5 minutes

‍

1. Add a class to the text you want to truncate

In my example, I use the class "slice"

‍

2. Add this code to your project

You can add this code in an embed or directly in the body of your page

Make sure you replace "slice" with your CSS class

‍

3. Adjust the character length to the value you want

All you need to do is replace the 64 in the code above with your own value. It’s that simple!

‍

4. Publish and you’re done!

That’s all there is to it 😎