Forcer une longue ligne de texte (sans espaces) à passer à la ligne en fonction de la largeur fixe des conteneurs parents en utilisant CSS

Question

Duplicata possible :
CSS : comment puis-je forcer une longue chaîne (sans espace) à être enveloppée dans XUL et/ou HTML

Disons qu'on a le code suivant :

Ceci-est-une-longue-ligne-de-texte-sans-espace-Ceci-est-une-longue-ligne-de-texte-sans-espace-Ceci-est-une-longue-ligne-de-texte-sans-espace-Ceci-est-une-longue-ligne-de-texte-sans-espace

Je m'excuse mais sur stack overflow (selon l'aperçu) les extraits de code ne se coupent pas.

Dans la plupart (?) des cas, ce qui suit provoquera l'étirement du conteneur contenant la longue ligne de texte sur toute la largeur du texte qu'il contient.

Nous aimerions forcer ceci à se couper en ligne (même en plein milieu d'un mot) selon la largeur spécifiée en css (width:100px) du conteneur parent.

Est-ce possible via une balise css que je ne connais pas ?

Compatibilité IE6+, plus gecko/webkit/opera s'il vous plaît.

Answer 1

Réponse moderne (CSS3), qui fonctionne désormais dans tous les navigateurs:

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

Notez que vous pourriez avoir besoin d'ajouter overflow:hidden et/ou width:100% à un élément parent/ancestral.

---

Ancienne réponse:

.wrap { 
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */    
   white-space: -pre-wrap;     /* Opera <7 */   
   white-space: -o-pre-wrap;   /* Opera 7 */    
   word-wrap: break-word;      /* IE */
}

Answer 2

Une combinaison de word-wrap et de word-break peut résoudre ce problème pour vous. Voir Comment forcer un saut de ligne dans un mot trèèèèèès long dans une DIV? (possible doublon)