Comment forcer un saut de ligne dans un mot long dans un DIV ?

Question

Ok, c'est vraiment déroutant. J'ai du contenu à l'intérieur d'un div comme ceci :

<div style="background-color: green; width: 200px; height: 300px;">

Thisisatest.Thisisatest.Thisisatest.Thisisatest.Thisisatest.Thisisatest.

</div>

Cependant, le contenu déborde du DIV (comme prévu) car le "mot" est trop long.

Comment puis-je forcer le navigateur à "casser" le mot lorsque cela est nécessaire pour faire tenir tout le contenu à l'intérieur ?

Answer 1

Utilisez word-wrap:break-word;

Il fonctionne même dans IE6, ce qui est une agréable surprise.

---

word-wrap: break-word a été remplacé par overflow-wrap: break-word; qui fonctionne dans tous les navigateurs modernes. IE, étant un navigateur mort, s'appuiera toujours sur la version dépréciée et non standard de word-wrap à la place.

Utilisations existantes de word-wrap fonctionne encore aujourd'hui puisqu'il s'agit d'un alias pour overflow-wrap selon le cahier des charges.

Answer 2

Je ne suis pas sûr de la compatibilité du navigateur

word-break: break-all;

Vous pouvez également utiliser le <wbr> étiquette

<wbr> (rupture de mot) signifie : "Le navigateur peut insérer un saut de ligne ici, s'il souhaite." Si le navigateur ne pense pas qu'un saut de ligne est nécessaire, rien rien ne se passe.

Answer 3

Cela pourrait être ajouté à la réponse acceptée pour une solution "multi-navigateur".

Sources :

• http://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/

• http://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/

  .your_element{ -ms-word-break: break-all; word-break: break-all;

  / Non standard for webkit / word-break: break-word;

  -webkit-hyphens: auto;
     -moz-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;

  }

Answer 4

J'étais justement en train de chercher le même problème sur Google, et j'ai posté ma solution finale. ICI . C'est également pertinent pour cette question.

Vous pouvez le faire facilement avec un div en lui donnant le style word-wrap: break-word (et vous devrez peut-être aussi définir sa largeur).

div {
    word-wrap: break-word;         /* All browsers since IE 5.5+ */
    overflow-wrap: break-word;     /* Renamed property in CSS3 draft spec */
    width: 100%;
}

Cependant, pour les tables vous devez également vous inscrire : table-layout: fixed . Cela signifie que les largeurs des colonnes ne sont plus fluides, mais sont définies sur la base des largeurs des colonnes de la première ligne uniquement (ou via des largeurs spécifiées). Plus d'informations ici .

Exemple de code :

table {
    table-layout: fixed;
    width: 100%;
}

table td {
    word-wrap: break-word;         /* All browsers since IE 5.5+ */
    overflow-wrap: break-word;     /* Renamed property in CSS3 draft spec */
}

Answer 5

CSS word-wrap:break-word; , testé dans FireFox 3.6.3