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

Si vous voulez que le texte débordant dans le div soit automatiquement mis à la ligne au lieu d'être caché ou de faire une barre de défilement, utilisez la fonction

word-wrap: break-word

propriété.

Answer 2

Réponse courte

Il suffit d'utiliser :

word-wrap: break-word;
white-space: pre-wrap;
word-break: break-word;

Réponse longue

1. word-wrap

Permet aux mots longs d'être interrompus et de passer à la ligne suivante.

Valeurs possibles :

• normal : Ne rompez les mots qu'aux points de rupture autorisés

• break-word : Permet de briser des mots incassables

  div { width: 150px; border: 2px solid #ff0000; }

  div.normal { word-wrap: normal; }

  div.break { word-wrap: break-word; }

  <h2>word-wrap: normal</h2> <div class="normal"> This div contains a VeryLongWordWhichDoesNotFitToTheBorder.</div>

  <h2>word-wrap: break-word</h2> <div class="break"> This div contains a VeryLongWordWhichDoesNotFitToTheBorder.</div>

2. white-space

Spécifie comment l'espace blanc à l'intérieur d'un élément est traité.

Valeurs possibles :

• nowrap : Le texte ne passera jamais à la ligne suivante.

• pre-wrap : Les espaces blancs sont préservés par le navigateur. Le texte sera enveloppé si nécessaire, et sur les sauts de ligne.

  div { width: 150px; border: 2px solid #ff0000; }

  div.nowrap { white-space: nowrap; }

  div.pre-wrap { white-space: pre-wrap; }

  <h2>white-space: nowrap</h2> <div class="nowrap">This div contains a very long but normal paragraph with so many words and nothing else.</div>

  <h2>white-space: pre-wrap</h2> <div class="pre-wrap">This div contains a very long but normal paragraph with so many words and nothing else.</div>

3. word-break

Spécifie comment les mots doivent être coupés lorsqu'ils atteignent la fin d'une ligne.

Valeurs possibles :

• normal : règles de retour à la ligne par défaut.

• break-word : Pour éviter tout débordement, les mots peuvent être interrompus à des endroits arbitraires.

  div { width: 150px; border: 2px solid #ff0000; }

  div.normal { word-break: normal; }

  div.break-word { word-break: break-word; }

  <h2>word-break: normal (default)</h2> <div class="normal"> This div contains a VeryLongWordWhichDoesNotFitToTheBorder.</div>

  <h2>word-break: break-word</h2> <div class="break-word"> This div contains a VeryLongWordWhichDoesNotFitToTheBorder.</div>

Pour les versions spécifiques des navigateurs de white-space utiliser :

white-space: pre-wrap;      /* CSS3 */
white-space: -moz-pre-wrap; /* Firefox */
white-space: -pre-wrap;     /* Opera <7 */
white-space: -o-pre-wrap;   /* Opera 7 */

Answer 3

Vous pouvez essayer :

<div id="myDiv">
    stuff 
</div>

#myDiv {
    overflow:hidden;
}

Vérifiez les docs pour la propriété overflow pour plus d'informations.

Answer 4

Vous pouvez utiliser la propriété CSS text-overflow pour tronquer les textes longs.

<div id="greetings">
  Hello universe!
</div>

#greetings
{
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; // This is where the magic happens
}

référence : http://makandracards.com/makandra/5883-use-css-text-overflow-to-truncate-long-texts

Answer 5

Vous pouvez le contrôler avec CSS, il y a quelques options :

• hidden -> Tout le texte qui déborde sera caché.
• visible -> Rend visible le texte débordant.
• scroll -> mettre des barres de défilement si le texte déborde

J'espère que cela vous aidera.