web-dev-qa-db-fra.com

Existe-t-il un moyen d’envelopper des mots longs dans une div?

Je sais qu'Internet Explorer a un style "retour à la ligne", mais j'aimerais savoir s'il existe une méthode permettant d'utiliser plusieurs navigateurs pour le faire avec du texte dans un div.

De préférence, CSS mais les extraits JavaScript fonctionneraient bien aussi.

edit: Ouais, se référant à de longues chaînes, Bravo les gens!

csshtmlword-wrap
165
rutherford

En lisant le commentaire original, rutherford recherche un texte multi-navigateur pour envelopper ininterromp (déduit de son utilisation de Word-wrap pour IE, conçu pour rompre les chaînes ininterrompues). .

/* Source: http://snipplr.com/view/10979/css-cross-browser-Word-wrap */
.wordwrap { 
   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 */
}

J'ai utilisé cette classe un peu maintenant, et fonctionne comme un charme. (note: je n'ai testé que dans FireFox et IE)

308
Aaron Bennett

La plupart des réponses précédentes ne fonctionnaient pas pour moi dans Firefox 38.0.5. Cela a fait ...

<div style='padding: 3px; width: 130px; Word-break: break-all; Word-wrap: break-Word;'>
    // Content goes here
</div>

Documentation:

32
Paul Zahra
white-space: pre-wrap

quirksmode.org/css/whitespace.html

14
NVI

La solution d'Aaron Bennet fonctionne parfaitement pour moi, mais j'ai dû supprimer cette ligne de son code -> white-space: -pre-wrap;, car elle donnait une erreur. Le code de travail final est donc le suivant:

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

merci beaucoup

12
Hugo

Vous pouvez essayer de spécifier une largeur pour la div, que ce soit en pixels, en pourcentages ou en em, et à ce stade, la div restera cette largeur et le texte sera alors automatiquement renvoyé à l'intérieur de la div.

0
Slevin

Comme David le mentionne, les DIV do enveloppent les mots par défaut.

Si vous faites référence à de très longues chaînes de texte sans espaces, ce que je fais est de traiter la chaîne côté serveur et d'insérer des plages vides:

thisIsAreallyLongStringThatIWantTo<span></span>BreakToFitInsideAGivenSpace

Ce n'est pas exact car il y a des problèmes de dimensionnement des polices et autres. L'option span fonctionne si la taille du conteneur est variable. S'il s'agit d'un conteneur de largeur fixe, vous pouvez simplement insérer des sauts de ligne.

0
DA.