Comment tronquer un texte avec Text Ellipsis en CSS ?

Que ce soit pour l'expérience utilisateur ou pour l'interface utilisateur, prévoir une gestion des textes qui dépassent est essentiel pour un développeur : un prénom trop long, par exemple, pourrait complètement ruiner les efforts mis en place dans le design d'un site internet.

C'est le problème des textes de longueur variable. Ne sachant pas leur taille à l'avance, ils peuvent casser le design, et donc par la force des choses affecter l'expérience utilisateur (ce que l'on ne veut surtout pas !) 🥲.

Heureusement, une propriété CSS existe : text-overflow: ellipsis.

Elle permet en un claquement de doigts de tronquer un texte qui dépasse pour ne pas gêner l'interface. Mais encore faut-il savoir l'utiliser correctement.

Qu'est-ce qu'un ellipsis en CSS ?

Un ellipsis en CSS, c'est, pour résumé, trois petits points (...) qui viennent s'ajouter à la fin d'un texte pour préciser que celui-ci a été coupé.

C'est une méthode très utilisée pour maintenir un design propre même avec des textes de longueur variable.

La propriété text-overflow: ellipsis est principalement utilisée pour des textes courts, sur une seule ligne.

Rassurez-vous, il existe une solution également pour tronquer des textes sur plusieurs lignes ! Nous la découvrirons ensemble dans la suite de l'article. 😉

Pourquoi tronquer un texte trop long ?

Pour résumé rapidement ce que nous avons déjà vu ensemble, limiter l'affichage des textes est souvent nécessaire pour plusieurs raisons :

1. Pour conserver une mise en page : Il est important d'avoir une expérience utilisateur aussi bonne que possible, sans quoi votre utilisateur ne reviendra pas sur votre site internet. Un texte qui dépasse et qui casse le design du site, on a vu mieux ! 😋
2. Pour s'adapter à différents écrans : Dans le cadre du responsive design, il est nécessaire de prévoir que les espaces peuvent se réduire. Dans ce cas, utiliser un ellipsis est nécessité.

Comment utiliser text-overflow: ellipsis ?

Pour ajouter un ellipsis en CSS, il suffit principalement d'utiliser la propriété CSS text-overflow.

Cependant, certains conditions doivent être respectées pour que cela fonctionne (vous ne pourrez pas simplement ajouter un ellipsis en utilisant cette propriété bêtement). 😬

Les prérequis pour utiliser text-overflow: ellipsis

Pour utiliser text-overflow: ellipsis, il est nécessaire de vérifier que :

• votre bloc possède une largeur fixe : C'est la première source d'erreur. Un ellipsis ne peut être ajouté que sur un bloc qui possède une taille précise (par exemple en utilisant width, max-width ou flex).
• le texte qui dépasse du bloc soit caché par défaut : Pour que l'ellipsis fonctionne, il faut que vous précisiez que tout élément dépassant du bloc doit être caché. Vous pouvez faire ceci grâce à la propriété overflow: hidden.
• vous empêchez les retours à la ligne par défaut : Il vous suffit d'utiliser la propriété CSS white-space: nowrap pour vous en assurer (autrement, le texte ira simplement sur une nouvelle ligne, ne provoquant pas notre ellipsis).

Maintenant que nous avons vu les conditions nécessaires pour faire apparaître un ellipsis, voyons un petit exemple !

Exemple d'utilisation de text-overflow: ellipsis

Voic un exemple qui permet de tronquer un texte sur une seule ligne grâce à CSS :

.tronquer-texte {
    white-space: nowrap; /* On empêche le retour à la ligne */
    overflow: hidden; /* On cache les éléments qui peuvent dépasser */
    text-overflow: ellipsis; /* On demande un ellipsis */
    width: 200px; /* On donne une largeur fixe */
}

Et notre HTML :

<div class="tronquer-texte">
    Ceci est un exemple de texte beaucoup trop long pour tenir dans ce tout petit endroit.
</div>

Testez par vous-même :

Dans cet exemple, notre texte est tronqué dès qu'il dépasse 200px de largeur : les trois points de suspensions s'ajouteront par la suite quand cette limite sera dépassée.

Pensez bien à vérifier si votre élément possède une largeur fixe, autrement, votre contenu s'adaptera de manière dynamique sans restriction : votre ellipsis ne sera pas affiché.

Comment tronquer un texte de plusieurs lignes ?

Pour tronquer un texte de plusieurs lignes grâce à CSS, il n'est pas possible d'utiliser directement la propriété text-overflow: ellipsis.

Nous allons devoir utiliser une solution, une propriété appelée line-clamp.

Cette propriété permet de définir un nombre de lignes à ne pas dépasser, après quoi le texte sera tronqué et des points de suspension ajoutés.

Exemple avec la propriété line-clamp

Voici un petit exemple d'implémentation d'un ellipsis pour un texte de plusieurs lignes grâce à la propriété CSS line-clamp :

.tronquer-multiligne {
    display: -webkit-box; /* On précise qu'on veut utiliser webkit-box */
    -webkit-box-orient: vertical; /* On indique le sens du texte */
    -webkit-line-clamp: 3; /* On donne le nombre de lignes souhaité */
    overflow: hidden; /* On cache tout ce qui peut dépasser */
}

Et notre code HTML :

<div class="tronquer-multiligne">
    Ceci est un exemple de texte long qui sera tronqué après trois lignes.
    Il permet de gérer les situations où le texte ne peut pas tenir sur une seule ligne. Par exemple, sur les descriptions pour les articles de blog.
</div>

Testez cet exemple ici :

Dans cet exemple, le texte sera tronqué après trois lignes (c'est ce qu'on indique avec -webkit-line-clamp ).

La propriété -webkit-line-clamp est une solution disponible pour les navigateurs utilisant le moteur WebKit.

Ceci veut dire que sa prise en charge peut dépendre du navigateur utilisé. Nous verrons un petit tableau récapitulatif des compatibilités un peu plus tard.

Compatibilité avec les navigateurs

Même si text-overflow: ellipsis et line-clamp sont largement supportés, il est important de vérifier la compatibilité des navigateurs.

Pour text-overflow: ellipsis

Comme on peut voir, la propriété CSS text-overflow est compatibile avec tous les navigateurs. Vous pouvez donc l'utiliser sans problème dans tous vos projets.

Pour line-clamp

Il est également possible d'utiliser la propriété line-clamp sur tous les navigateurs sauf sur opera mini et sur internet explorer.

Conclusion

Tronquer un texte (que ce soit sur une seule ligne ou bien sur plusieurs lignes) est devenu assez rapide et facile grâce aux dernières avancées du langage CSS.

Nous avons vu qu'il ne suffit pas d'appliquer sans réfléchir la propriété text-overflow: ellipsis pour qu'un ellipsis apparaisse, mais qu'il fallait s'assurer de plusieurs prérequis comme le fait que l'élement est une taille fixe.

Enfin, pour les éléments ayant plusieurs lignes à afficher (comme pour une petite description d'un article par exemple), nous avons vu qu'il est également possible d'ajouter un ellipsis grâce aux propriétés utilisées par le moteur WebKit avec line-clamp.

Si vous voulez aller encore plus loin, allez jeter un oeil à notre formation complète sur le HTML et le CSS. 😉