This content originally appeared on DEV Community and was authored by Alexandre Fauchard
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 X méthodes pour affiche 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 leonclickest 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
This content originally appeared on DEV Community and was authored by Alexandre Fauchard
Alexandre Fauchard | Sciencx (2022-01-30T11:22:34+00:00) “Voir plus”, ou comment faire un ellipsis personnalisé. Retrieved from https://www.scien.cx/2022/01/30/voir-plus-ou-comment-faire-un-ellipsis-personnalise/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.