Text overflow css

La propriété text-overflow gère la coupe d'un texte qui dépasse d'une boite div et peut être très utile en cas de responsive design, ou pour des modules de digest en page d'accueil qui ne montreraient que l'introduction d'un contenu. Le texte peut être simplement rogné avec clip, ou on peut afficher ... à la fin avec ellipsis, ou encore ce que l'on veut.

Il faut avant d'utiliser la propriété text-overflow appliquer un overflow: hidden à la boite contenant le texte.

p {
  white-space: nowrap;
  width: 100%;                   
  overflow: hidden; 
  text-overflow: clip;
}

p {
  white-space: nowrap;
  width: 100%;                   
  overflow: hidden; 
  text-overflow: ellipsis;
}

p {
  white-space: nowrap;
  width: 100%;                   
  overflow: hidden; 
  text-overflow: "...";
}