Tronquer un texte dans Webflow facilement
Introduction
| Approche | Méthode | Avantage |
|---|---|---|
| JavaScript (ce tutoriel) | Script sur classe CSS | Contrôle précis par nombre de caractères |
| CSS natif Webflow | text-overflow: ellipsis | Simple, sans code, tronque par ligne |
| CSS -webkit-line-clamp | Via embed CSS | Limite à N lignes sans JS |
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
Veillez à bien modifier "slice" par votre classe css
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 😎
bon à savoir
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
