Truncate text in Webflow easily

outils :
Illustration croce

Table of contents


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).

Exemple texte tronqué dans Webflow

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.

Exemple Classe CSS Webflow

2. Add this code to your project

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

  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) + '...';

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 😎

Photo de l'auteur
Sandro D.
Publié le
Mis à jour le
Growth Marketer, Webflow expert and a jack of all trades. I take care of commercial operations, ensure the smooth running of projects and take care of issues related to marketing (SEO, Tracking, Copywriting, etc.)
These tutorials might interest you

Our tutorials in the same category

See all our tutorials
Illustration traits
We use the best tools

Your site is developed using the best tools and best practices

Gemeos doesn't just offer you a website, but expertise in the best tools to guarantee you the best possible return on your investment.


To design your custom website and optimize its conversion rate


For pixel-perfect, optimized integration of your website


Organizing your project to perfection


To add advanced features to your project


Automate your workflows and save maximum time