Lorsque vous travaillez sur un projet Webflow, vous pouvez parfois rencontrer des situations où un texte est trop long et perturbe l'esthétique de votre page. Dans ce cas, une bonne pratique consiste à tronquer le texte et à ajouter des trois petits points pour indiquer que le contenu est partiellement masqué. Dans cet article, je vais vous montrer deux méthodes simples pour y parvenir : une avec un peu de code CSS et l'autre avec la méthode Client-First de Finsweet.
Pourquoi Tronquer un Texte sur Webflow ?
Tronquer un texte permet de maintenir une cohérence visuelle, surtout si vous affichez plusieurs éléments avec des descriptions de longueurs variables. Cela améliore également l'expérience utilisateur en rendant le contenu plus lisible et attractif, surtout sur des pages comme les blogs ou les boutiques en ligne.
Méthode 1 : Utilisation du CSS
La première méthode consiste à utiliser un petit bout de code CSS pour tronquer le texte à un nombre déterminé de lignes.
Étape 1 : Ajouter un Embed Code
Pour commencer, vous allez ajouter un embed code dans votre projet Webflow. Voici comment procéder :
- Dans votre projet Webflow, sélectionnez l’endroit où vous voulez ajouter le code.
- Cliquez sur "Add", puis "Embed Code" dans la page.
- À l’intérieur de ce code embed, vous allez ajouter les balises style.
Étape 2 : Appliquer la Classe
- Identifiez la classe CSS du texte que vous souhaitez tronquer. Par exemple, si vous travaillez sur la description d'un article, vous pouvez utiliser
.blog-post-intro. - Revenez dans l’embed code et remplacez
.votre-classepar la classe du texte cible, par exemple :
Étape 3 : Ajuster le Nombre de Lignes
Modifiez la valeur de -webkit-line-clamp pour ajuster le nombre de lignes affichées. Par exemple, en mettant 3 à la place de 2, vous afficherez trois lignes.
Méthode 2 : Utiliser Client-First de Finsweet
Si vous utilisez la méthode Client-First de Finsweet, il existe déjà des classes préconfigurées pour tronquer le texte facilement.
Étape 1 : Sélectionner l’Élément à Tronquer
Dans Webflow, sélectionnez l’élément de texte que vous voulez tronquer, par exemple la classe blog-post-intro.
Étape 2 : Appliquer les Classes Préconfigurées
Client-First inclut des classes pour tronquer un texte à deux ou trois lignes :
- Sélectionnez votre élément de texte.
- Appliquez la classe text-style-2-lines pour tronquer à deux lignes.
- Ou appliquez text-style-3-lines pour tronquer à trois lignes.
Ces classes sont spécialement conçues pour rendre le processus plus rapide et sans besoin de code personnalisé.
Maintenant, vous savez comment tronquer un texte sur Webflow, que ce soit via un code CSS ou avec les classes Client-First de Finsweet. Tronquer un texte est une excellente manière d'optimiser la présentation de vos pages et de maintenir une expérience utilisateur harmonieuse. Choisissez la méthode qui vous convient le mieux et testez-la sur votre projet Webflow !
