Design

4 min

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

bon à savoir

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 !

‍

bon à savoir

Pour une solution 100% sans JavaScript, utilisez overflow: hidden + text-overflow: ellipsis + white-space: nowrap (une ligne) ou -webkit-line-clamp (plusieurs lignes). Plus performant que le JS.

4. Publiez et c'est gagné !

Y a plus qu'à kiffer 😎

Tronquer un texte dans Webflow facilement

Introduction

1. Ajoutez une classe au texte que vous souhaitez tronquer

2. Ajoutez ce code dans votre projet

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

4. Publiez et c'est gagné !

Heading

Lorem ipsum dolor sit amet consectetur.

Lorem ipsum

tutoriels similaires