• Hey! Don't you want go to home to see my new posts?

Script word-wrap to Firefox - updated version

Posted by Micox - Náiron J. C. G..

June 14, 2007

Hello,

Now a new and revised version of my old script to word-wrap big words in Firefox.
Correctly tested in Firefox and Opera. No more bugs in children or parents elements.
More easy to use.

The Firefox dont wrap big words like Internet Explorer. IE have a CSS property called word-wrap that can be set to 'break-word' and break the big words. Firefox and Opera don't have this property yet.
This script simulates this property in elements that have class name set to "word-wrap".

How to use:

1. Get the script in http://naironjcg.googlepages.com/micoxWordWrap.js (4kb)

2. Call this script in your html document: <script type='text/javascript' src='micoxWordWrap.js'></script>

3. Put class name 'word-wrap' in elements (or parents of this element) that you wanna break words. Example: <p class="word-wrap">

Example above: 

<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>

Ready finish. Bugs, please tell-me.

Vote this link in DZone.

Sorry my bad english.

If you want see my script and make modifications:

/**
 * 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);

Labels: , ,

Sorry my bad english :) .
Type a comment! The finger dont fall (23 comments).

Add to Del.icio.usDel.icio.us Digg!

Subscribe my feed

Doubts? Visit the iEvolution Web Developer Foruns

Concursos públicos

23 Comments:

Anonymous Anonymous said... June 17, 2007 11:20 AM  
It doesnt work if you use lot of # or %. Could you update it please to work on all symbols too ?
Anonymous Anonymous said... June 17, 2007 11:26 AM  
unescape("%eb%03%59%eb%05%e8%f8%ff%ff%ff%49%49%49%49%49%49%37%49%49%49%49%49%49%49%49%49%49%49%51%5a%6a%44%58%50%30%41%30%41%6b%41%41%54%42%41%32%41%41%32%42%41%30%42%41%58%38%41%42%50%75%68%69%39%6c%38%68%31%54%43%30%47%70%57%70%4c%4b%30%45%77%4c%6e%6b%31%6c%47%75%51%68%43%31%48%6f%6c%4b%52%6f%75%48%4c%4b%63%6f%31%30%53%31%38%6b%71%59%6c%4b%36%54%6c%4b%47%71%48%6e%64%71%4f%30%4d%49%6c%6c%4e%64%4b%70%30%74%76%67%4a%61%39%5a%76%6d%55%51%6b%72%4a%4b%68%74%47%4b%70%54%35%74%55%54%61%65%6b%55%6c%4b%41%4f%77%54%34%41%48%6b%71%76%6e%6b%46%6c%62%6b%6e%6b%33%6f%77%6c%54%41%68%6b%6e%6b%57%6c%6c%4b%46%61%48%6b%4f%79%61%4c%71%34%56%64%48%43%54%71%4b%70%31%74%4c%4b%37%30%46%50%4f%75%4f%30%41%68%46%6c%6e%6b%43%70%46%6c%6c%4b%30%70%35%4c%6e%4d%4e%6b%50%68%35%58%68%6b%56%69%6c%4b%4b%30%6e%50%57%70%53%30%73%30%4e%6b%62%48%67%4c%43%6f%50%31%4a%56%51%70%36%36%6d%59%58%78%6d%53%49%50%33%4b%56%30%42%48%41%6e%58%58%6d%32%70%73%41%78%6f%68%69%6e%6f%7a%54%4e%42%77%49%6f%38%67%33%53%30%6d%75%34%41%30%66%4f%70%63%65%70%52%4e%43%55%31%64%31%30%74%35%33%43%63%55%51%62%31%30%51%63%41%65%47%50%32%54%30%7a%42%55%61%30%36%4f%30%61%43%54%71%74%35%70%57%56%65%70%70%6e%61%75%52%54%45%70%32%4c%70%6f%70%63%73%51%72%4c%32%47%54%32%32%4f%42%55%30%70%55%70%71%51%65%34%32%4d%62%49%50%6e%42%49%74%33%62%54%43%42%30%61%42%54%70%6f%50%72%41%63%67%50%51%63%34%35%77%50%66%4f%32%41%61%74%71%74%35%50%44") + NOP
Anonymous Anonymous said... June 17, 2007 11:27 AM  
#############################################################################################
---------------------------------------------------------------------------------------------
Anonymous Anonymous said... June 20, 2007 10:41 PM  
try
(div width="20px")
(p class="word-wrap")averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_(br)averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_(br)averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_(/p)
(/div)

then it will BROKEN...
NOTE:change ( with <, ) with >
Blogger David Chen said... July 26, 2007 4:24 AM  
Hey El, great script hack! I notice about this word wrap issue for Fire Fox too while coding CSS and thought that it simply won't work with out some sort of hack. I realized that your script actually insert a space to force the long word into two entities and therefore the second entity line break to next line. It works well for displaying long url or code lines. It was what I was looking for in my blog which sometimes I just drop JavaScript snippets in HTML for my post and found out that FF doesn't have the word wrap feature built in for CSS as oppose to IE! Anyway, I too write an instruction about this issue and have it link here, nice work and I hope that you can come up with ways to solve the force white space insert hack with better alternatives. I wish that I can help, but I am no JavaScript guru...lol! Here is the link to it:
http://itskylineblog.blogspot.com/2007/07/word-wrap-in-design-time-hack-for-fire.html
Blogger Aamir said... August 1, 2007 6:12 AM  
Excellent.
Blogger Amoxicillin said... August 19, 2007 7:18 PM  
I found there is conflict with some swf, which cause firefox error. By using firebug, it indicates the problem exist between line 62 to line 64:
while(pos_quebra<=caracs){
quem.nodeValue += texto.substring(pos_quebra,pos_quebra + quant_quebra) + " "
pos_quebra = pos_quebra + quant_quebra;
}
I suppose the script fall into a infinite loop, and make firefox error.
Blogger David Chen said... August 21, 2007 12:58 AM  
Yea, occasionally there is this javascript error(cyclic __proto__ value). So far, no side effect.

Testing:https://www.blogger.com/comment.g?blogID=7157500263328606425&postID=1820936830300800010
Blogger David Chen said... August 21, 2007 12:59 AM  
testing really long in new blogger comment unbreak: https://www.blogger.com/comment.g?blogID=7157500263328606425&postID=1820936830300800010249824891247892748924727489247924729984947892472984729848278942984798298427847892398472894279479247298472949798247429
Blogger LoD said... September 17, 2007 4:03 PM  
excellent work.thanks.

but i encounter a problem, when there are
a lot div or p or h1 to be "word-wrap-ed" (i test with 40 divs),
the page loading lag is very large compared to without using this word-wrap
script, about 10 times slow or more.
Blogger Micox - Náiron J. C. G. said... September 18, 2007 4:14 AM  
Yeap :( this script its not perfect, but is what we have to try to decide this problem :(

thanks
Anonymous fray said... September 25, 2007 11:57 PM  
Hi, good work!! how I can put that width maximum is always of 450px? thanks
Blogger Micox - Náiron J. C. G. said... September 26, 2007 4:12 AM  
Hey fray, its just set the width by CSS ( width:'400px' )
Anonymous Anonymous said... October 23, 2007 4:15 AM  
คำนำหน้าคำนำหน้าคำนำหน้าคำนำหน้าคำนำหน้าคำนำหน้าคำนำหน้าคำนำหน้าคำนำหน้าคำนำหน้าคำนำหน้าคำนำหน้าคำนำหน้าคำนำหน้าคำนำหน้าคำนำหน้าคำนำหน้าคำนำหน้าคำนำหน้าคำนำหน้าคำนำหน้าคำนำหน้าคำนำหน้าคำนำหน้าคำนำหน้าคำนำหน้าคำนำหน้าคำนำหน้าคำนำหน้าคำนำหน้าคำนำหน้าคำนำหน้า
Anonymous DickDastardly said... December 3, 2007 7:14 PM  
First, you have a wonderful script. I'm glad someone has figured how to make this happen. However, I'm trying to make this wordwrap issue work inside a "textarea" form field. I can't seem to get it to work here. Any ideas?
Blogger Micox - Náiron J. C. G. said... December 4, 2007 3:46 AM  
Hi dick
My script its not to textareas.
See about HTML property "wrap" in textareas.
bye.
Anonymous Anonymous said... December 16, 2007 6:59 PM  
คำนำหน้าคำนำหน้าคำนำหน้าคำนำหน้าคำนำหน้าคำนำหน้าคำนำหน้าคำนำหน้าคำนำหน้าคำนำหน้าคำนำหน้าคำนำหน้าคำนำหน้าคำนำหน้าคำนำหน้าค ำนำหน้าคำนำหน้าคำนำหน้าคำนำหน้าคำนำหน้าคำนำหน้าคำนำหน้าคำนำหน้าคำนำหน้าคำนำหน้าคำนำหน้าคำนำหน้าคำนำหน้าคำนำหน้าคำนำหน้าคำน ำหน้าคำนำหน้า
Anonymous Anonymous said... December 25, 2007 10:56 PM  
averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_averylongstring_
Anonymous Anonymous said... February 6, 2008 6:29 AM  
very long loading times on firefox, but quite fast on IE6. I think it's related to many links on wrap surface, but I am not sure
Anonymous Anonymous said... February 16, 2008 6:22 PM  
あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
Blogger Dino said... June 27, 2008 12:14 PM  
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA


just test
Anonymous Anonymous said... July 10, 2008 2:16 PM  
Awesome. Thanks Micox.
Works for both IE and Firefox. But not for "textarea" yet.
An idea :
for an example if we have (replace "(" symbol with "<" and ")" symbol with ">" for HTML tag):
(DIV class="wrap-word" ID="wordwrap1")
(TEXTAREA ID="textarea1" rows="4" cols="50" wrap="virtual" onChange="wrapwords();") LongWordsLongWords (/TEXTAREA)
(/DIV).
----------------
function wrapwords(){
//Just an Example algorithm, not real codes
var Elmnt1 = document.getElemntById('wordwrap1');
var Elmnt2 = document.getElemntById('textarea1');
var E2v = Elmnt2.value.replace("ActualCodesThatBreakLongWordsIntoSmallerPiecesWithSpaces");
Elmnt1.innerHTML = "(TEXTAREA id='textarea1' rows='4' cols='50' wrap='virtual' onChange='wrapwords();') E2v (/TEXTAREA)";
}
-----------------
Basically to use innerHTML, or, textContent in DIV to replace the whole inner contents (including TEXTAREA) of DIV. Then all these will wrap words even inside the TEXTAREA in firefox & similar browser. Please implement.
Thanks again.
~ Tarik. July 10,2008. 2:08PM. UTC-08:00.
Blogger Gochi said... September 10, 2008 12:25 AM  
This post has been removed by a blog administrator.

Write your comment.

Links to this post:

<< Go back to Home Page to see new posts.

Micox Codes - Some Rights Reserved - Creative Commons