CSS : Tronquer du texte

Voici une petite astuce afin de tronquer un texte en CSS si celui-ci dépasse de son conteneur.

Voici le code CSS qui permet d’effectuer cet « effet » qui est très bien supportée même sous IE ;).

h1 {
    white-space : nowrap; //permet de forcer le non retour à la ligne
    overflow : hidden; //permet de masquer si ça dépasse
    text-overflow : ellipsis; //permet de rajouter ... si ça dépasse
}

Une petite démo avec des boites style Modern UI (Windows 8).

Texte tronqué

Références

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *