tadarank afiliados

14 junho, 2007

Script word-wrap para Firefox - versão revisada

Categorias: ,

Hoeee,

Dei uma corrigida no meu antigo script pra quebrar palavras grandes no Firefox.
Agora testado no Firefox e no Opera. Não tem mais bugs com elementos filhos ou pais.
E também ficou mais fácil de usar.

O Firefox não quebra grandes palavras como o Internet Explorer. O IE tem uma propriedade CSS chamada word-wrap que pode ser setada para 'break-word' pra dar uma quebrada nas palavras grandes. Firefox e Opera não tem suporte a esta propriedade.
Este script simula esta propriedade nos elementos que tiverem sua classe igual a "word-wrap".

Como usar :

1. Baixe o script em http://naironjcg.googlepages.com/micoxWordWrap.js (4kb)

2. Chame este script no seu documento html: <script type='text/javascript' src='micoxWordWrap.js'></script>

3. Coloque a classe 'word-wrap' nos elementos (ou pai de elementos) que você irá querer quebrar palavras grandes.

Examplo: 

<head>
<script type='text/javascript' src='micoxWordWrap.js'></script>
<style>
#url {
width: 400px;
padding: 20px;
border: 1px solid green;
}
</style>
</head>
<body>
<div style='width: 350px; border: 1px dotted green;' class='word-wrap'>
 <h3>Class word-wrap used just on some parent:</h3>
 <p>Normal words Normal words Normal words Normal words Normal words </p>
 <p>BigWordBigWordBig<br />
  WordBigWordBigWordBigWordBigWordBigWordBigWordBigWordBigWordBigWordBigWordBigWordBigWordBigWordBigWordBigWord</p>
 <p><a href='http://elmicoxcodes.blogspot.com'>BigWordAroundedByLink(tagInside)<br />  BigWordAroundedByLink(tagInside)BigWordAroundedByLink(tagInside)BigWordAroundedByLink(tagInside)BigWordAroundedByLink(tagInside)</a></p>
</div>
<div style='width: 350px; border: 1px dotted green; padding: 20px;'>
 <h3>Class word-wrap used directly in children tags:</h3>
 <p class="word-wrap">Normal words Normal words Normal words Normal words Normal words </p>
 <p class="word-wrap">BigWordAroundedByLink (tagInside)BigWordAroundedByLink(tagInside)BigWordAroundedByLink(tagInside)BigWordAroundedByLink(tagInside)BigWordAroundedByLink(tagInside)</p>
 <p class="word-wrap"><a href='http://elmicoxcodes.blogspot.com'>BigWordAroundedByLink (tagInside)BigWordAroundedByLink(tagInside)BigWordAroundedByLink(tagInside)BigWordAroundedByLink(tagInside)BigWordAroundedByLink(tagInside)</a></p>
</div>
<div id='result'>aaa </div>
</body>

Pronto. Por hoje é só pessoal!

Vota neste link lá no DZone.

Bugs, comenta ae povo. Té.

Se você quiser ver meu script e fazer as alterações que desejar:

/**
 * Micox Word Wrap 2.0 
 * elmicoxcodes.blogspot.com - www.ievolutionweb.com - micoxjcg@yahoo.com.br
 * Creative Commons License - creativecommons.org
 * 
 * Description:
 * Wraps large words in Firefox and Opera.
 * Works just like the word-wrap: break-word; CSS property in Internet Explorer
 *
 * Usage:
 * 1) Include this JS file in your page. Example: 
 * 2) Set 'word-wrap' as the classname of the elements that you want to word break. Example: 

 *
**/

function wrap(quem){
 var larg_total,larg_carac,quant_quebra,pos_quebra, over_orig;
 var elementos,quem, pai, caracs, texto, pai_texto, display_orig, wid_orig;
    
    if(quem.nodeType==3){
  //elemento tipo texto. tenho que verificar se o pai dele tá quebrando
  
  if(quem.nodeValue.replace('\n','').replace('\t','').trim()==''){
   //se o textNode for vazio, não prossigo
   return true;
  }
  
  pai = quem.parentNode;  
  texto = quem.nodeValue;   
  
  //pegando a largura setada oficial
  display_orig = pai.style.display;
  over_orig = pai.style.overflow;
  wid_orig = pai.style.width;
  pai.style.display="block";
  pai.style.overflow="hidden";
  larg_oficial = pai.offsetWidth;
  
  //pegando a largura real total
  pai.style.display="table";
  pai.style.width = "auto"; //para o Opera
  pai.style.overflow = "visible";
  larg_total = pai.offsetWidth;
  //alert("texto: " + texto + " \r\n larg_oficial:" + larg_oficial + " \r\n larg_total:" + larg_total)
  pai.style.overflow = over_orig;
  
  if(larg_total>larg_oficial){ //se o pai do text tá extrapolando, quebro o text
   pos_quebra = 0;
   caracs = pai.textContent.length;
   //recalculando a largura real tirando os espaços pra poder calcular
   // direito a largura dos caracs e quando vou quebrar
   
   quem.nodeValue = pai.textContent.replace(/ /g,"Ø") + " ";
   larg_total = pai.offsetWidth;
   pai.style.display = display_orig;
   
   larg_carac = larg_total / caracs ;
   quant_quebra = parseInt(larg_oficial/larg_carac) - 2; 
   quant_quebra = quant_quebra>0 ? quant_quebra : 1 ;
   quem.nodeValue = '';
   
   while(pos_quebra<=caracs){
    quem.nodeValue += texto.substring(pos_quebra,pos_quebra + quant_quebra) + " "
    pos_quebra = pos_quebra + quant_quebra;
   }   
  }
  pai.style.display = display_orig;
  pai.style.display = over_orig;
  pai.style.width = wid_orig;
  
 }else if(quem.childNodes.length==1 && quem.childNodes[0].nodeType==3){
  //é o último do nível e o único filho é texto
  texto = String(quem.innerHTML); //salvando o original
  
  
  /*quem.innerHTML = " "  
  display_orig = quem.style.display;
  quem.style.display="block";
  larg_oficial = quem.offsetWidth;
    
  quem.style.display="table";
  quem.innerHTML = texto;
  larg_total = quem.offsetWidth;*/
  
  //pegando a largura setada oficial
  display_orig = quem.style.display;
  over_orig = quem.style.overflow;
  wid_orig = quem.style.width;
  quem.style.display="block";
  quem.style.overflow="hidden";
  larg_oficial = quem.offsetWidth;
  
  //pegando a largura real total
  quem.style.display="table";
  quem.style.width = "auto"; //para o Opera
  quem.style.overflow = "visible";
  larg_total = quem.offsetWidth;
  //alert("texto: " + texto + " \r\n larg_oficial:" + larg_oficial + " \r\n larg_total:" + larg_total)
  quem.style.overflow = over_orig;
    
  if(larg_total>larg_oficial){ //quebrando quem extrapolou
   pos_quebra = 0;
   caracs = texto.length;
   //recalculando a largura real tirando os espaços pra poder calcular
   // direito a largura dos caracs e quando vou quebrar
   quem.innerHTML = quem.innerHTML.replace(/ /g,"Ø");
   larg_total = quem.offsetWidth;
   larg_carac = larg_total / caracs ;
   
   quant_quebra = parseInt(larg_oficial/larg_carac) - 2; 
   quant_quebra = quant_quebra>0 ? quant_quebra : 1 ;
   quem.innerHTML = ""
   
   while(pos_quebra<=caracs){
    quem.innerHTML += texto.substring(pos_quebra,pos_quebra + quant_quebra) + " "
    pos_quebra = pos_quebra + quant_quebra;
   }
   
  } 
  quem.style.display = display_orig;
  quem.style.display = over_orig;
  quem.style.width = wid_orig;
  
 }else if(quem.childNodes.length>0){
  //se tiver mais que um filho, vou ter que executar de filho em filho nele
  for(var i=0;i<quem.childNodes.length;i++){
   wrap(quem.childNodes[i]);
  }
 }
}
function wordWrap(){  
    var elementos = document.body.getElementsByTagName("*") 
 
    if(navigator.appName.indexOf("Internet Explorer")>-1){
        for(var i=0; i<elementos.length;i++){
            if(elementos[i].className.indexOf("word-wrap")>-1){
                elementos[i].style.wordWrap = "break-word";
            }
        }
    }else{
        for(var i=0; i<elementos.length;i++){
            if(elementos[i].className.indexOf("word-wrap")>-1){
                wrap(elementos[i]);
            }
        }
    }
}
String.prototype.trim = function() { //Trim ambas direcciones
   return this.replace(/^[ ]+|[ ]+$/g,"");
}
function bodyOnReady(func){
 //call the function when DOM loaded
 //http://www.elmicox.com/2007/evento-body-onready-sem-o-uso-de-libs/
 //by Micox - www.elmicox.com - elmicox.blogspot.com - webly.com.br
 if(!(document.body==null)){
  func();
 }else{
  var func_rep = func;
  setTimeout(function(){ bodyOnReady(func_rep) },100);
 }
}

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

12 comentários:

  1. Anônimo15 junho, 2007 08:26

    Valeu pelo script, Nairon! Só fiz correções na descrição em inglês, no início do script:

    (Como o Blogger não aceita tags como a script, troquei o abre tag e fecha tag por suas html entities.)

    * Description:

    * Wraps large words in Firefox and Opera.

    * Works just like the word-wrap: break-word; CSS property in Internet Explorer

    *

    * Usage:

    * 1) Include this JS file in your page. Example: <script type='text/javascript' src='micoxWordWrap.js'></script>

    * 2) Set 'word-wrap' as the classname of the elements that you want to word break. Example: <p class='word-wrap'>

    ResponderExcluir
  2. Anônimo15 junho, 2007 18:08

    No mínimo útil no aperto. Perguntinha: o CSS no IE não passa na validação, né?

    ResponderExcluir
  3. Micox - Náiron J. C. G.16 junho, 2007 09:12

    @rafael
    Hopa, valeu mesmo cara.
    Vou alterar.

    @juliogreff
    hehee,não: "La propiedad word-wrap no existe : break-word"

    ResponderExcluir
  4. Informa Tech!27 junho, 2007 10:26

    Micox, o script funcionou com "div", mas se o caso for tabelas, o script pode funcionar? Tentei por aqui e nem rolou.

    ResponderExcluir
  5. Micox - Náiron J. C. G.27 junho, 2007 10:39

    Ixx, Tiago, nem testei. Não deve rolar porque eu uso muito mudanças no display (algo que não funfa muito em tables).

    Tente ver sobre o table-layout:fixed pra ver se sai algo.

    ResponderExcluir
  6. Informa Tech!27 junho, 2007 14:34

    Funciona Micox. Fiz o teste aqui. :P Só não estava conseguindo por que a tabela que estava usando não tinha o conteudo com o nome extenso.

    ResponderExcluir
  7. anitaluiza03 julho, 2007 11:07

    Muito bacana teus scripts, ve se vc tem a soluçao pro seguinte enigma: existe forma de jogar um texto num campo do tipo input file? Preciso disso para um script funcionar, e embora eu esteja pegando o valor direitinho, o campo file nunca mostra. Tem soluçao?

    ResponderExcluir
  8. Paulo Fernandes15 março, 2008 14:35

    belo script!!!

    perfect

    mui belo script

    e viva o micox, viva! viva! viva!

    ResponderExcluir
  9. Anônimo30 julho, 2008 13:35

    quem.nodeValue = pai.textContent.replace(/ /g,"Ø") + " ";

    O que queria dizer esse "/ /g"?
    Dá erro no ie6... ;)

    De resto 5 estrelas.

    ResponderExcluir
  10. sdfsdfsdf06 agosto, 2008 15:28

    com imagens grandes no firefox ficou bom mais no explorer ainda buga

    ResponderExcluir
  11. Anônimo08 setembro, 2008 13:45

    show... estava precisando disso mesmo!

    /flama

    ResponderExcluir
  12. Anônimo17 novembro, 2008 10:37

    Parabens!!

    ResponderExcluir

Assinar: Postar comentários (Atom)

Resultado! Concursos

Carregando...