170 votes

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

Je sais qu'IE a un style de retour à la ligne, mais j'aimerais savoir s'il existe une méthode multi-navigateur pour le texte dans un div.

De préférence, les fragments CSS mais javascript fonctionneraient bien aussi

edit: ouais en se référant à de longues chaînes, les gens encouragent!

310voto

Aaron Bennett Points 2116

En lisant le commentaire original, rutherford est à la recherche d'une méthode multi-navigateur pour envelopper le texte ininterrompu (déduit de son utilisation du retour à la ligne 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: j'ai seulement testé dans FireFox et IE)

14voto

NVI Points 3846
 white-space: pre-wrap
 

quirksmode.org/css/whitespace.html

12voto

Hugo Points 39

La solution d'Aaron Bennet fonctionne parfaitement pour moi, mais je devais supprimer cette ligne de son code -> white-space: -pre-wrap; parce qu'elle donnait une erreur, donc le code de travail final est 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

0voto

DA. Points 15714

Comme David le mentionne, les DIV encapsulent 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, c'est traiter la chaîne côté serveur et insérer des plages vides:

 thisIsAreallyLongStringThatIWantTo<span></span>BreakToFitInsideAGivenSpace
 

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

0voto

Slevin Points 204

Vous pouvez essayer de spécifier une largeur pour le div, que ce soit en pixels, en pourcentages ou en ems, et à ce stade, le div restera cette largeur et le texte sera automatiquement enroulé dans le div.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X