Mettre des points de suspension pour cacher le reste d'un texte avec CSS

Utilisons overflow, text-overflow et white-space.

Imaginons une balise <p></p> :

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dolor sit amet consectetur adipiscing 
  elit ut aliquam. Tristique sollicitudin nibh sit amet. In fermentum posuere urna nec tincidunt praesent semper feugiat. Cum sociis natoque penatibus et magnis dis 
  parturient.
</p>

Ce texte est très grand. Ajoutons une largeur maximale avec max-width :

p {
    max-width: 300px;
}

Voici le résultat que nous avons grâce à ce code :

Notre objectif est maintenant de faire en sorte de limiter notre texte à une seule ligne. Pour réussir ceci, nous allons maintenant appliquer le style suivant : 

p {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

Nous retrouvons plusieurs propriétés :

• max-width - Pour donner une largeur à ne pas dépasser ;
• overflow - Qui permet de cacher le texte qui dépasse ;
• text-overflow - Décrit ce que doit faire le navigateur si le texte dépasse sur plusieurs lignes ;
• white-space - Donne la façon dont les blancs sont gérés (on ne veut pas de retour à la ligne s'il y a un espace, afin que l'ellipse fonctionne).

Résultat :

Bravo ! Vous savez maintenant afficher des points de suspensions en fin de texte !