retour automatique à la ligne dans le css / js

Question

Je suis à la recherche d'une manière de croix-navigateur de l'habillage de longues portions de texte qui n'ont pas d'espaces insécables (par exemple, les longues Url) à l'intérieur des divs avec pré-déterminé de largeurs.

Voici quelques solutions que j'ai trouvé sur le web et pourquoi ils ne sont pas de travail pour moi:

• overflow : hidden / auto / faites - j'ai besoin de tout le texte soit visible sans défilement. Le div peut croître verticalement, mais pas horizontalement.
• L'injection de ­ dans la chaîne de caractères via js / côté serveur - ­ est pris en charge par FF3 maintenant, mais le fait de copier et de coller une URL avec un ­ dans le milieu ne fonctionne pas dans Safari. Aussi, à ma connaissance, il n'y a pas une propre méthode de mesure de la largeur du texte à trouver la meilleure chaîne de compensations pour ajouter ces personnages (il y a un hacky, voir point suivant). Un autre problème est que le zoom dans Firefox et Opera peut facilement se casser cette.
• le dumping du texte dans un élément masqué et de mesure offsetWidth liés à l'élément ci-dessus, il requiert l'ajout de caractères dans la chaîne. Aussi, la mesure de la quantité de pauses nécessaires dans un long corps de texte pourrait facilement prendre des milliers de cher DOM insertions (un pour chaque sous-chaîne de longueur), ce qui pourrait effectivement geler le site.
• à l'aide d'une police à espacement fixe - encore une fois, le zoom peut gâcher les calculs de largeur, et le texte ne peut pas être de style librement.

Les choses qui semblent prometteuses, mais ne sont pas tout à fait là:

• word-wrap : break-word - c'est maintenant une partie de CSS3 projet de travail, mais il n'est pas pris en charge par Firefox, Opera ou Safari encore. Ce serait la solution idéale si elle a travaillé sur tous les navigateurs d'aujourd'hui :(
• l'injection <wbr> les balises dans la chaîne via js/ server-side - copier et coller de l'Url fonctionne dans tous les navigateurs, mais je n'ai toujours pas une bonne façon de mesurer où mettre les pauses. Aussi, cette balise HTML invalide.
• l'ajout de pauses après chaque personnage - c'est mieux que des milliers de DOM insertions, mais pas encore idéal (en ajoutant des éléments du DOM d'un document mange de la mémoire et ralentit bas du sélecteur de requêtes, parmi d'autres choses).

Quelqu'un aurait-il plus d'idées sur la façon de s'attaquer à ce problème?

Answer 1

Css yo!

.wordwrap {
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */ 
}

Aussi, je viens de trouver cet article http://www.impressivewebs.com/word-wrap-css3/

Donc, vous devriez utiliser

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

.no_wordwrap {  
    word-wrap: normal;
}  

Answer 2

j'ai généralement traitées en utilisant une combinaison de word-wrap et de la <wbr> idée. remarque: il existe quelques variantes. comme vous pouvez le voir, ​ est probablement votre meilleur pari pour la compatibilité.

word-wrap prise en charge du navigateur n'est pas terrible, toutes choses considérées, Safari, Internet Explorer et Firefox 3.1 (version Alpha) tous les appuyer (src), de sorte que nous ne pouvons pas être tout ce qui loin.

en ce qui concerne le côté serveur de la rupture, j'ai utilisé cette méthode assez réussi (php):

function _wordwrap($text)   {
    $split = explode(" ", $text);
    foreach($split as $key=>$value)   {
        if (strlen($value) > 10)    {
            $split[$key] = chunk_split($value, 5, "​");
        }
    }
    return implode(" ", $split);
}

fondamentalement, pour les mots de plus de 10 caractères, je les diviser à 5 caractères. cela semble fonctionner pour tous les cas d'utilisation, j'ai été remis.

Answer 3

Il était vaguement liées problème ici http://stackoverflow.com/questions/33933/textarea-with-100-width-ignores-parent-elements-width-in-ie7

Ne sais pas si une solution concluante n'a jamais été trouvée, mais il me semble que le plus proche a été word-break:break-tout , qui peut faire le travail dans Internet Exploder.

J'ai également trouvé ce http://petesbloggerama.blogspot.com/2007/02/firefox-ie-word-wrap-word-break-tables.html enterré dans mes favoris, ce qui indique un travail autour de la plupart des autres navigateurs, ce qui pourrait aider.

CSS3 sera grande si jamais il arrive ici...

Hope qui aide, seront intéressés de voir ce que vous venez avec. Désolé je ne peux pas offrir quoi que ce soit testé ou plus spécifiques.

Answer 4

Vous pouvez utiliser le tableau de mise en page +word-wrap attribut CSS qui fonctionne maintenant dans IE7-8 et FF3.5. Il ne résoudra pas le problème mais au moins votre design ne sera pas rompu.