tadarank afiliados

23 maio, 2006

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.

14 comentários:

  1. Fala micox,

    Esse esquema ai é show, já me ajudou!!
    Parabéns pela solução!

    Abraço!

    ResponderExcluir
  2. falae rapaz... muito útil... mas enquanto eu tiver usando php sagás aki, prefiro usar a função q faz isso... mas eh show d bola pro pessoal q naum tem linguagem server-side... ;)

    akele abraço

    ResponderExcluir
  3. Grande Micox,

    Muito útil mesmo essa sua função cara... ficou show de bola

    Com certeza eu vou usar ela, claro deixando os devidos créditos... hehehe

    Abraço

    ResponderExcluir
  4. Bruno, mas a quebra que o php faz é estipulando a quantidade de caracteres que voce quer quebrar. Você tem que especificar "na mão".

    O php não faz a quebra automaticamente e nem de acordo com a largura do elemento do texto. Algo que só é possível com javascript.

    ResponderExcluir
  5. [...] However there is no such property that will work in Firefox. So what to do? After a bit of head scratching I decided to have a look at using JavaScript. Although I am yet to come up with my own solution here it is in Spanish thanks to Mr El Micox [...]

    ResponderExcluir
  6. Parabens pelo script!! Resolveu meu problema =]!

    abraço

    ResponderExcluir
  7. opa, testei com o firefox 3 e funcionou corretamente tbm, e resovleu o meu problema aqui, valeu.

    ResponderExcluir
  8. word-wrap: break-word;

    é so colocar no css

    sem javascript e complicações

    ResponderExcluir
  9. @Anônimo,

    Já conheço esta declaração aí pro IE.
    Mas já testou isso aí no Firefox, Opera e Chrome?

    ResponderExcluir
  10. Sim o unico que não funciona é Opera pelo menos até 9.6

    ResponderExcluir
  11. Bem, não funcionou aqui no FF 3.0.13. Veja o código que testei:

    [p style='width: 200px; border: 1px solid black; word-wrap: break-word;']aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbbbb[/p]

    (troque o [ ] por abre e fecha tag)

    Talvez no FF novo já esteja funcionando.

    ResponderExcluir
  12. Who knows where to download XRumer 5.0 Palladium?
    Help, please. All recommend this program to effectively advertise on the Internet, this is the best program!

    ResponderExcluir

Resultado! Concursos