Functional

Truncate text in Webflow easily

outils :
Illustration croce

Table of contents

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

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

 <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 😎

Photo de l'auteur
Sandro D.
Publié le
16/5/2024
Mis à jour le
16/5/2024
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.

Figma

To design your custom website and optimize its conversion rate

Webflow

For pixel-perfect, optimized integration of your website

Client-first

Organizing your project to perfection

Wized

To add advanced features to your project

Make

Automate your workflows and save maximum time