Envelopper des mots longs dans une Shoutbox

Question

J'essaie de trouver une solution pour envelopper les mots qui sont extrêmement longs dans un shoutbox. Par exemple, si quelqu'un écrit un chemin de fichier ou si quelqu'un écrit juste un tas de bêtises. Par exemple:

blahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahnonsensenonsensenonsensenonsense 

Le Shoutbox peut avoir plusieurs largeurs (selon l'endroit où il est situé), donc définir une largeur de l'étiquette extérieure ne serait pas approprié, puisque le contenu doit se développer pour remplir la largeur de la page. Maintenant, à l'intérieur de cette étiquette externe, il y a des étiquettes internes qui tiennent chaque cri à l'intérieur.

Maintenant, je l'ai fait quelques devoirs à ce sujet et il a été dit que cela fonctionne:

.yourclass(#youid) 
{ 
    word-wrap: break-word; /* Internet Explorer 5.5+ */ 
    white-space: normal; /* Firefox */ 
} 

Mais j'ai besoin que cela fonctionne dans tous les 5 principaux navigateurs: Firefox, Internet Explorer 7 et 8, Opera, Chrome et Safari. Existe-t-il une solution pour les 5 principaux navigateurs?

Note: Cela ne me dérange pas de combiner CSS, JS, PHP et/ou tout autre langage pour que cela fonctionne correctement.

Quelqu'un a-t-il rencontré ce problème? Est-ce que quelqu'un l'a déjà résolu? Je regarde la fonction de php wordwrap, mais cela ne m'aide pas, car il veut un certain nombre de caractères. Pourrait aider si je pouvais définir une largeur en pixels et si le mot dépasse cette largeur, pour envelopper le caractère suivant sur la ligne suivante. Le problème avec l'utilisation de caractères pour un retour à la ligne est que ces caractères peuvent avoir différentes tailles de police, et ne seront PAS cohérents et ne seront PAS du tout utiles. Peut-être existe-t-il un moyen de déterminer la largeur de chaque personnage? Et si cette largeur dépasse la largeur de la Shoutbox, alors envelopper à la ligne suivante? Cela pourrait fonctionner, mais je ne sais pas comment le déterminer.

Quelqu'un peut-il m'aider s'il vous plaît? Merci :)

Voici le lien où je suis en utilisant le CSS ci-dessus =>

Il ne fait envelopper le mot très long à Opera, dans tous les trois des cris dans Opera, quelqu'un peut-il s'il vous plaît tester dans d'autres navigateurs et me donner des commentaires à ce sujet?

Answer 1

word-wrap: break-word; est en effet ce que vous cherchez. Je ne sais pas si cela fonctionne dans Opera, mais d'autres devraient tous fonctionner.

Answer 2

Vos choix (comme je le vois) sont les suivants:

1. Utilisez une solution qui ne fonctionne pas pour tous les navigateurs, ou
2. Utilisez CSS overflow:auto ou overflow:hidden pour préserver la taille du conteneur tout en laissant la les mots ininterrompus passent au-delà du bord, ou
3. Pause à une limite de caractères (sur le serveur ou le client) et «casser» le texte non-sens, ou
4. Faire une rupture rapide (mais visible à l'utilisateur) et re-rupture du texte à diverses limites de caractères jusqu'à ce que vous trouviez une situation où scrollWidth <= clientWidth. (Cela nécessitera des appels répétés setTimeout pour permettre au navigateur de se réorganiser après votre modification , avant de pouvoir mesurer l'effet.)

Je suppose que vous pouvez aussi utiliser une heuristique grossière basée sur une taille de police connue et la largeur mesurée, mais aussi ne rencontrerais ce qui semble être vos critères d'exactitude. Je suis désolé de dire que ce que vous voulez (si je comprends bien) n'est pas raisonnablement possible en utilisant la technologie à portée de main.

Answer 3

Je vous suggère d'utiliser deux méthode ci-dessous:

• troncature(): http://phpcode.mypapit.net/truncate-a-very-long-text-with-php-function/33/

• Ellipse(): http://brenelz.com/blog/creating-an-ellipsis-in-php/

Sinon, vous pouvez utiliser CSS par trop-plein est caché.

Espoir qui aident