Fonctionnel

Tronquer un texte dans Webflow facilement

outils :
Illustration croce

Sommaire

Introduction

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

Exemple texte tronqué dans Webflow

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"

Exemple Classe CSS Webflow

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 😎

Ces tutoriels pourraient vous intéresser

Nos tutoriels de la même catégorie

Ajouter un sommaire dans Webflow

Webflow
Finsweet
Fonctionnel

Personnaliser le design des sliders dots dans Webflow

Webflow
Embed
Fonctionnel

Automatiser l’envoi d’un mail aux prospects qui remplissent un formulaire

Webflow
Zapier
Fonctionnel
Voir tous nos tutoriels
Illustration traits
Nous utilisons les meilleurs outils

Votre site est développé avec les meilleurs outils et les meilleurs pratiques

Gemeos ne vous propose pas simplement un site web, mais une expertise sur les meilleurs outils pour vous garantir un retour sur investissement optimal. 

Figma

Pour designer votre site web sur mesure et optimiser son taux de conversion

Webflow

Pour une intégration pixel perfect et optimisée de votre site web

Client-first

Pour une organisation aux petits oignons de votre projet

Wized

Pour ajouter des fonctionnalités avancées à votre projet

Make

Pour automatiser vos fluxs de travail et vous faire gagner un max de temps