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).

Références

• text-overflow
• white-space