CSS : Tronquer un texte trop long avec text-overflow

Une image vaut mieux que mille mots, certes, mais parfois nous avons quand même besoin d'utiliser des mots ! Et quand nos titres sont trop longs, qu'ils dépassent, se mettent à la ligne et cassent tout le design de l'application, c'est embêtant !

Évidemment il y a toujours la possibilité de les restreindre à un certains nombre de caractères en javascript, mais le problème est que deux textes ayant le même nombre de caractères ne feront pas forcément la même taille à l'affichage !

Les deux lignes ci-dessous sont par exemple composées de 10 caractères chacune :
1111111111
0000000000

L'idéal est donc de pouvoir gérer ce problème du point de vue graphique, et heureusement, en CSS3 est apparu l'attribut text-overflow qui va nous permettre de corriger ça.

Text-overflow: ellipsis

Tout d'abord je tiens à préciser que la propriété text-overflow est très bien gérée par tous les navigateurs, même internet explorer, donc libre à vous d'en abuser !

Text-overflow va donc nous permettre de spécifier au moteur de rendu du navigateur de quelle façon il doit gérer les textes qui dépasseraient de leur conteneur.

Il existe plusieurs valeurs pour cet attribut, mais celle qui va nous être le plus utile sera "ellipsis" qui force le navigateur à ajouter des points de suspensions "..." à la fin de la chaîne tronquée.

A noter que pour que la propriété fonctionne, il faut aussi ajouter deux autres propriétés à notre éléments :

• "white-space: nowrap" pour éviter à notre texte de se mettre sur plusieurs lignes
• "overflow: hidden" pour empêcher notre texte de sortir du conteneur

Voilà un exemple minimaliste fonctionnel (la taille du conteneur à été choisie arbitrairement, il n'y a pas besoin que ce soit une taille fixe) :

/* style.css*/
.short-text-container {
  width: 200px;
}
.short-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

Je suis un texte trop long à écrire

Et voilà, vous allez maintenant pouvoir gérer vos titres et vos textes courts de manière simple et avec un rendu parfaitement lisible !