Les points clés
- Un contenu long et dynamique peut facilement briser les mises en page si la troncature du texte n'est pas prévue.
- La troncature de texte permet de conserver une cohérence visuelle dans les cartes et les listes de l'interface.
- La troncature de texte n'a aucun impact négatif sur le référencement (SEO) lorsque le contenu complet reste présent dans le DOM.
- Webflow propose des méthodes no-code et low-code pour tronquer le texte.
- Framer permet une troncature de texte simple, basée sur le nombre de lignes, directement dans l'éditeur.
- Anticiper le dépassement de texte dès le début rend les projets no-code plus évolutifs et robustes.
Cas d'utilisation
Si vous ne prenez pas en compte cette situation lors de la phase de conception, le résultat est souvent constitué de blocs de hauteurs inégales, ce qui nuit à la lisibilité et à la cohérence visuelle globale.
Pour y remédier, utilisez la troncature, également appelée troncature de texte.
À quoi sert la troncature de texte ?
Cette technique limite le texte visible à un nombre défini de lignes tout en conservant le début du contenu. La mise en page reste stable, même lorsque les textes sont plus longs que prévu.
Au-delà de la préservation de la structure visuelle, la troncature peut également créer un effet de teasing subtil, incitant les utilisateurs à cliquer pour en savoir plus.
Avantages de la troncature de texte pour l'UI et l'UX
La troncature aide principalement à protéger un design contre un contenu imprévisible.
Elle permet de :
- améliorer la lisibilité de l'interface,
- maintenir une cohérence visuelle entre les blocs,
- assurez une présentation uniforme des listes d'articles ou des cartes.
D'un point de vue SEO, la troncature n'a aucun impact direct sur le classement. Les moteurs de recherche analysent toujours le contenu complet présent dans le DOM, même s'il est visuellement tronqué. Cependant, une meilleure lisibilité et une compréhension plus rapide du contenu peuvent améliorer l'expérience utilisateur, le taux de clic et l'engagement, contribuant ainsi indirectement à de meilleures performances.
Comment tronquer du texte dans Webflow
Il existe deux manières de mettre en œuvre la troncature dans Webflow, selon vos besoins.
Option 1 : 100 % No-code
Utilisez la fonctionnalité intégrée de Webflow.
Une fois le texte que vous souhaitez tronquer sélectionné, suivez ce chemin :
Typography → More type options → Ellipsis → Allow them.
Le texte sera automatiquement tronqué et s'adaptera à la taille de son conteneur.
Attention : cette option ne permet pas de définir le nombre de lignes visibles avant la troncature.
Option 2 : Low-code
Voici un extrait de code à ajouter dans la section Custom Code de votre page ou des paramètres de votre site.
Une fois ajouté, appliquez la classe .truncate à tout élément textuel que vous souhaitez tronquer.
Le code peut être personnalisé (nom de la classe, nombre de lignes, etc.).
<!-- Truncate -->
<style>
.truncate { /* Class to use or modify */
display: -webkit-box; /* Required for line clamping */
-webkit-line-clamp: 2; /* Number of lines to display */
-webkit-box-orient: vertical; /* Sets vertical box orientation */
overflow: hidden; /* Hides overflowing content */
text-overflow: ellipsis; /* Displays ellipsis (…) when truncated */
}
</style>
Comment tronquer du texte dans Framer
Pour appliquer une troncature dans Framer, sélectionnez le texte concerné, puis faites un clic droit dans le panneau de droite où se trouvent les options de style de texte et ajoutez tronquer.
Une fois activé, le texte sera tronqué et une nouvelle option apparaîtra dans le panneau de droite, vous permettant de définir le nombre de lignes au-delà duquel la troncature s'applique.
Pour rendre ce comportement évolutif, vous devriez l'appliquer directement au sein d'un composant.
Conclusion
La troncature de texte est un détail mineur, mais elle peut faire une énorme différence dans vos projets.
Ainsi, que vous construisiez avec Webflow ou Framer, anticiper des contenus longs et imprévisibles permet de garder vos mises en page propres et évolutives. Cela protège votre interface contre les ruptures et rend votre design plus résilient au fil du temps.
Dans le développement no-code, réfléchir au comportement du contenu dès le début est tout aussi important que le design visuel.
