En HTML/CSS, lorsque votre texte est trop grand pour la place attribuée, vous pouvez ajouter la valeur text-overflow : ellipsis pour afficher … à la fin.

Le problème est que cela fonctionne uniquement sur les textes sur une seule et unique ligne et qu’il n’y a pas moyen de voir le texte en entier.

Aujourd’hui, nous allons donc voir 2 méthodes pour afficher du texte sur une ou plusieurs lignes sans qu’il ne dépasse !

La méthode CSS only

Cette première méthode est probablement la méthode la plus “propre”, elle se réalise uniquement en CSS, mais nous verrons qu’elle n’a pas forcément le meilleur rendu.

Cette méthode consiste à afficher en bas de la zone de texte un élément (ici un pseudo-élément ::before) afin de cacher la fin du texte. De plus, pour éviter que le texte soit coupé en plein milieu d’un mot, nous ajoutons un dégradé sur le coté de l’élément.

Avantages

• “Responsive”
• CSS only

Inconvénients

• Toujours présent meme quand ce n’est pas nécessaire
• Dans le cas du ::before, l'élément qui reçoit le onclick est la balise <p>et donc pas uniquement le "Voir plus"

La méthode JS + regex

Le principe de cette méthode est simple : une boucle javascript va parcourir le contenu de la balise de texte (fonctionne aussi bien avec un

qu’avec des headings) et retirer les mots de manière itérative jusqu’à ce que le contenu rentre dans la zone définie.

Ici, nous allons pouvoir définir une balise (inline) qui sera ajouté à la fin du texte, elle sera ainsi parfaitement intégrée au texte d’origine. De plus, la vérification reposant sur le viewport, l’élément « voir plus » n’est ajouté que s’il est nécessaire !

Avantages

• Intégration parfaite
• Répond à tous nos besoin : cache le texte en trop et permet d’afficher quand même ce texte grâce à un bouton fonctionnel

Inconvénients

• Processus un peu lourd
  • Processus d’implémentation un peu lourd et nécessitant l’utilisation du javascript
• Besoin de recalculer si changement de viewport