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);
For prototype followers (by Franco Sabbatini - thanks)
function wordWrap(){
//Original by Micox - elmicoxcodes.blogspot.com
//Adapted to Prototype by Franco Sabbatini
elementos = $$('.word-wrap');
elementos.each(
function(elemento){
if(Prototype.Browser.Gecko){
if(elemento.hasClassName('word-wrap')){
texto = elemento.innerHTML.gsub(' ', 'Ø');
elemento.innerHTML = ' ';
original = elemento.style.display;
elemento.style.display='block';
largo = elemento.offsetWidth;
elemento.style.display='table';
elemento.innerHTML = texto;
largo_total = elemento.offsetWidth;
pos_quiebre = 0;
caracteres = texto.length;
texto = elemento.innerHTML.gsub('Ø', ' ');
largo_caracteres = largo_total/caracteres;
if(largo_total>largo){
cantidad_quiebra = parseInt(largo/largo_caracteres);
cantidad_quiebra = cantidad_quiebra - (parseInt(cantidad_quiebra/6));
elemento.innerHTML = '';
while(pos_quiebre<=caracteres){
elemento.innerHTML = elemento.innerHTML +
texto.substring(pos_quiebre, pos_quiebre + cantidad_quiebra) + ' ';
pos_quiebre += cantidad_quiebra;
}
} else {
elemento.innerHTML = texto;
}
elemento.style.display = original;
}
}
}
);
}
