Script - Quebra de palavras (word-wrap) no FF

Quebra de palavra quando nao couber na largura do elemento

Importante: Nova versão melhorada deste script disponível em Word-wrap para Firefox - versão revisada.

Continuando a postagem de soluções que eu fiz no fórum do Imasters (Agora o fórum da vez é o iEvolution. Postei esta solução lá. Visitem e tirem suas dúvidas sobre ela lá.), hoje vou postar uma solução para a questão da quebra de palavras grandes que não ocorre no Firefox (FF). O IE faz a quebra da palavra, já em outros browsers eu não testei.

Não sei se é recomendação quebrar a palavra quando não couber na largura, ou não quebrar. Só sei que as vezes, palavras grandes ultrapassam a largura e acabam com nosso layout. Se alguém souber o que diz a W3C, poste um comentário ae...

Se já tiver algo na net como esta função minha, postem aí pra eu conhecer.
Usem, comentem e critiquem a vontade. Dúvidas, postem no fórum.
Só não esqueçam de deixar meus créditos que fazer a função deu trabalho né : )

O problema

(Baseei o texto do problema na postagem do Leandro Vieira que coincidentemente é colunista de Dreamweaver do Imasters)

Suponhamos que você tenha a seguinte marcação:

<style>
#url {
width: 400px;
}
</style>
<div id="url">
    <p>URL:</p>
    <p>http://www.google.com.br/search?hl=pt-BR&q=blableblibloblu&btnG=Pesquisa+Google&meta= </p>
</div>

O IE irá renderizar mais ou menos assim:

URL
http://www.google.com.br/search?hl=pt-
BR&q=plugsites&btnG=Pesquisa+Google&meta=

Já o Firefox irá renderizar sem quebrar a url, o que pode acabar com nosso layout e ficar sobre outros textos importantes. Perceba que o texto quebrou a largura do elemento:

URL
http://www.google.com.br/search?hl=pt-BR&q...Pesquisa+Google

 

Isso é um grande problema, a marcação para word-wrap só virá com o CSS 3 que ainda não está implementado nos browsers.
O macaco aqui ficou 3 horas procurando a solução na net, na referencia oficial do Mozilla, do MSDN e não encontrou nada pra resolver a pendenga.
O que fazer então? Quebra o texto na mão (isso não é bom pra textos dinâmicos)? Arrancar os cabelos?!!

Calma, eu acabei tendo que ralar a cabeçola e ficar algumas horas desenvolvendo uma função em javascript que fizesse a tal quebra da palavra. A tão desejada "word-wrap" para o Firefox!!

A solução

Bom, minha função procura os elementos p que tiverem a classe word-wrap daí pega a largura do bixo e estima quantas letras caberiam nesta largura. Daí ela faz a quebra nesta quantidade de letras. Não entendeu? Então apenas use. hehe

<style>
#url { border:1px solid black; width:50px; }
p {border:1px solid blue; }
</style>
<script>
function wordWrap(){
/******
* wordWrap - Efetua quebra em palavras que não cabem na largura
*            de seu elemento pai (até que chegue o CSS3)
* Use a vontade mas coloque meu nome nos créditos. Tenha ética.
* Dúvidas, me mande um email.
* Versão: 1.0 - 26/04/2006
* Autor: Micox - Náiron José C. Guimarães - micoxjcg@yahoo.com.br
* Uso: chame a função no onload do body.
*      coloque a classe "word-wrap" nos parágrafos que quiser a quebra
*******/
    var larg_total,larg_carac,quant_quebra,pos_quebra;
    var elementos,quem, caracs, texto, display_orig;
    
    elementos = document.getElementsByTagName("p")
    
    for(var i=0; i<elementos.length;i++){
        if(elementos[i].className=="word-wrap"){
            quem = elementos[i];
            
            quem.innerHTML = String(quem.innerHTML).replace(/ /g,"Ø")
            texto = String(quem.innerHTML)
            
            quem.innerHTML = " "
            
            display_orig = quem.style.display;
            quem.style.display="block";
            larg_oficial = quem.offsetWidth;
            //alert("oficial: " + larg_oficial)
            //alert("display " + quem.style.display)
            if(!document.all) quem.style.display="table";
            //alert("display " + quem.style.display)
            quem.innerHTML = texto;
            larg_total = quem.offsetWidth;
            //alert("total: " + larg_total)
            
            pos_quebra = 0;
            caracs = texto.length;
            texto = texto.replace(/Ø/g," ")
            larg_carac = larg_total / caracs
            if(larg_total>larg_oficial){
                quant_quebra = parseInt(larg_oficial/larg_carac)
                quant_quebra = quant_quebra - (parseInt(quant_quebra/6)) //quanto menor o num, maior a garantia;
                quem.innerHTML = ""
                while(pos_quebra<=caracs){
                    quem.innerHTML = quem.innerHTML + texto.substring(pos_quebra,pos_quebra + quant_quebra) + " "
                    pos_quebra = pos_quebra + quant_quebra;
                }
            }else{
                quem.innerHTML = texto;
            }//end if do larg_total>larg_oficial
            quem.style.display = display_orig;
        }//end if do word wrap
    }//end for loop dos elementos
}
</script>
<body onload="wordWrap()">
<div id="url">
    <p>URL:</p>
    <p class="word-wrap">lala </p>
    <p class="word-wrap">EstaEUmaLinhaQueDeveraSerQuebradaPoisÉGrandeDemais</p>
    <p  class="word-wrap">EstaEOutraLinha,QueDeveraSerQuebrada.PoisÉGrandeDemais.MasComPontuacao</p>
    <p  class="word-wrap">abc defgh 890123456789012 ijklmnopqrstu 9012345678901 vivaO micox </p>
    <p  class="word-wrap">Vou colocar aqui uma frase comum pragente ver comé que ela se comporta</p>
</div>
</body>

Testado apenas no FF1.5 e no IE6. Quem testar em outros posta ae.

Té a próxima.

Gostou da dica acima? Então clica nos botões de compartilhamento abaixo e me ajude a dica a subir no Google.