Truncate text in Webflow easily

Introduction

Truncating text can be super useful for several reasons, in particular to maintain consistency in the design of your Hub pages such as blog, guides, articles... It allows you to maintain the consistency of the layout regardless of the length of your texts (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 am using the “slice” class.

‍

2. Add this code to your project

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

 <script>
  document.addEventListener('DOMContentLoaded', function () {
    var elements = document.getElementsByClassName('slice');
    var limiteCaracteres = 64;

    for (var i = 0; i < elements.length; i++) {
      var currentElement = elements[i];

      if (currentElement.textContent.length > limiteCaracteres) {
        currentElement.textContent = currentElement.textContent.slice(0, limiteCaracteres) + '...';
      }
    }
  });
</script>

Be sure to modify “slice” with your css class

var elements = document.getElementsByClassName ('Slice');

‍

3. Change the length of the character string to the desired value

All you need to do is change the 64 in the code above to your value. It's as simple as that!

‍

4. Publish and you're done!

There is more to enjoy 😎