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 !
Que vous essayiez de scaler votre start-up, de créer votre premier site internet ou de vous reconvertir en tant que développeur, Believemy est votre nouvelle maison. Rejoignez-nous, évoluez et construisons ensemble votre projet.