Existe-t-il un moyen d'envelopper de longs mots dans un div?

173

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

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

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

css html word-wrap Rutherford
la source
7
L'habillage de mots se produit par défaut. Voulez-vous dire envelopper quand il n'y a pas de mots séparés?
Quentin

Réponses:

313

En lisant le commentaire original, Rutherford est à la recherche d'un moyen multi-navigateurs pour envelopper du texte ininterrompu (déduit de son utilisation de word-wrap pour IE, conçu pour casser des 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'utilise cette classe depuis un moment maintenant, et ça fonctionne comme un charme. (note: je n'ai testé que dans FireFox et IE)

Aaron Bennett
la source
Ancien message, mais il ne semble pas rendre les espaces lorsque IE est en mode bizarreries.
Jeremy
2
J'utilise Firefox 24.6.0, et word-wrap: break-wordc'est ce qui a réellement fonctionné.
user545424
3
Word-wrap: break-wordbien que créé par Microsoft fait maintenant partie de la norme CSS 3 et c'est ce qui fait l'affaire :-)
Pascal_dher
38

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:

Paul Zahra
la source
2
Merci! c'est la seule réponse qui a fonctionné (word-break: break-all; c'est ce qui a fonctionné pour moi)
DaniCE
12

La solution d'Aaron Bennet fonctionne parfaitement pour moi, mais j'ai dû 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

Hugo
la source
1
Aaron Bennett a mentionné cette même réponse 2 ans avant vous. ce que vous avez fait ici n'ajoute pas de valeur.
AaA
6
Salut, comme vous pouvez le voir si vous lisez à nouveau les deux réponses, ce que je dis, c'est simplement que la solution d'Aaron est correcte, mais j'obtenais une erreur dans l'une des lignes qu'il a écrites, alors je viens de la changer pour la solution qui a fonctionné pour moi. Peut-être que je devrais avoir un commentaire dans sa réponse, je le sais, désolé et merci
Hugo
J'ai dû ajouter ce "white-space: -pre-wrap" et ça a fonctionné :)
Ravi Khambhati
0

Comme david mentionne, DIVs faire des mots wrap 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 avec le dimensionnement des polices 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.

DA.
la source
@TomHert c'est vraiment étrange. Bien que, eh bien, IE. Ça ne marche jamais. Cela dit, cela a été publié il y a 5 ans. CSS3 a maintenant de meilleures options de retour à la ligne que IE peut accueillir developer.mozilla.org/en-US/docs/Web/CSS/word-wrap
DA.
Ouais je sais, j'ai juste été choqué par la simplicité de cette solution que j'ai dû l'essayer :)
Tom Hert
0

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 enveloppé dans le div.

Slevin
la source
Essayez de définir une largeur de 10 pixels ... puis utilisez un mot de plus de 10 pixels
Paul Zahra