Comment empêcher le texte de déborder en CSS ?

Question

Comment empêcher le texte d'un bloc div de déborder en CSS ?

div {
  width: 150px;
  /* what to put here? */
}

<div>This div contains a VeryLongWordWhichDoesNotFitToTheBorder.</div>

Answer 1

Il existe une autre propriété css :

white-space : normal;

La propriété d'espace blanc contrôle la façon dont le texte est traité sur l'élément auquel elle est appliquée.

div {

  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 

}

Answer 2

Essayez d'ajouter cette classe afin de résoudre le problème :

.ellipsis {
  text-overflow: ellipsis;

  /* Required for text-overflow to do anything */
  white-space: nowrap;
  overflow: hidden;
}

Plus d'informations sur ce lien http://css-tricks.com/almanac/properties/t/text-overflow/

Answer 3

overflow: scroll ? Ou auto. dans l'attribut de style.

Answer 4

Je pense que vous devriez commencer par les bases du W3.

https://www.w3schools.com/cssref/css3_pr_text-overflow.asp

div {
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
}

Answer 5

C'est maintenant la propriété css :

word-break: break-all