"Voir plus", ou comment faire un ellipsis personnalis

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

Le problme est que cela fonctionne uniquement sur les textes sur une seule et unique ligne et quil ny a pas moyen de voir le texte en entier.

Aujourdhui, nous allons donc voir X mthodes pour affiche du texte sur une ou plusieurs lignes sans quil ne dpasse !

La mthode CSS only

Cette premire mthode est probablement la mthode la plus propre, elle se ralise uniquement en CSS, mais nous verrons quelle na pas forcment le meilleur rendu.

Cette mthode consiste afficher en bas de la zone de texte un lment (ici un pseudo-lment ::before) afin de cacher la fin du texte. De plus, pour viter que le texte soit coup en plein milieu dun mot, nous ajoutons un dgrad sur le cot de llment.

Avantages

• Responsive
• CSS only

Inconvnients

• Toujours prsent meme quand ce nest pas ncessaire
• Dans le cas du ::before, l'lment qui reoit le onclick est la balise <p>et donc pas uniquement le "Voir plus"

La mthode JS + regex

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

quavec des headings) et retirer les mots de manire itrative jusqu ce que le contenu rentre dans la zone dfinie.

Ici, nous allons pouvoir dfinir une balise (inline) qui sera ajout la fin du texte, elle sera ainsi parfaitement intgre au texte dorigine. De plus, la vrification reposant sur le viewport, llment voir plus nest ajout que sil est ncessaire !

Avantages

• Intgration parfaite
• Rpond tous nos besoin : cache le texte en trop et permet dafficher quand mme ce texte grce un bouton fonctionnel

Inconvnients

• Processus un peu lourd
  • Processus dimplmentation un peu lourd et ncessitant lutilisation du javascript
• Besoin de recalculer si changement de viewport