Tronquer un texte dans Webflow facilement

Introduction

Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment tronquer un texte dans Webflow facilement

Tronquer du texte peut être super utile pour plusieurs raisons, notamment pour maintenir une cohérence dans le design de vos pages Hub type blog, guides, articles... Il permet de maintenir la cohérence du layout quelle que soit la longueur de vos textes (cf : image ci-dessous).

Voici comment vous pouvez faire de même en moins de 5 minutes

‍

1. Ajoutez une classe au texte que vous souhaitez tronquer

Dans mon exemple j'utilise la classe "slice"

‍

2. Ajoutez ce code dans votre projet

Vous pouvez ajouter ce code dans un embed ou bien dans le body de votre page directement

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

Veillez à bien modifier "slice" par votre classe css

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

‍

3. Modifiez la longueur de la chaîne de caractères avec la valeur souhaitée

Il vous suffit de modifier le 64 dans le code ci-dessus par votre valeur. C'est si simple que ça !

‍

4. Publiez et c'est gagné !

Y a plus qu'à kiffer 😎