Réduire la longueur d'un texte affiché et afficher "…"
Réduire la longueur d'un texte affiché et afficher "…"

Réduire la longueur d'un texte affiché et afficher "…"

Sommaire

Présentation

Aïe, tous les textes de notre CMS sont très longs mais je peux afficher que 5 lignes… Pas de panique. J'ai le code qui répondra à ton problème… Bonus, tu pourras ajouter "…"

Là encore, un texte + un Custom Code et le tour est joué ! Magique 🤯

Étapes

  • Créer un texte
  • Ajouter beaucoup de mots dans ce texte
  • Donner une .class à ce texte
  • Ajouter un Custom Code dans les Page Settings
  • Copier-Coller le code ci-dessous.
  • Remplacer .myClass par la .class que tu as défini pour ton texte (attention à conserver le . devant)
  • BONUS: Tu peux définir le nombre de lignes en remplaçant le 5 par la valeur souhaitée
  • Sauvegarder & Publier

Vidéo

Code Nécessaire

<style>
.myClass { 
	display: -webkit-box; 
  -webkit-line-clamp: 5; 
  -webkit-box-orient: vertical; 
  overflow: hidden; 
}
</style>

image

Apprends à créer un site moderne, dynamique et intègre les meilleurs outils du marché dans Webflow. Rejoins la formation sans attendre & Maitrise Webflow très rapidement.

-20% offert avec le code WIKI20 (valable sur les paiements en 1x et 4x)