Updated version of word-wrap to Firefox and Opera here!!! Above, a old version with bugs.
Hello. My first topic.
This blog will show just codes.
I have a blog in portuguese language and decide post my codes in english to all the word heheh.
My english is not good, so, sorry and go to codes. Just codes.
The Firefox dont wrap big words like Internet Explorer in width of a parent element.
Example:
This code
<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>
In IE will render like
URL
http://www.google.com.br/search?hl=pt-
BR&q=plugsites&btnG=Pesquisa+Google&meta=
And the Firefox will render like
URL
http://www.google.com.br/search?hl=pt-BR&q...Pesquisa+Google&meta=
This is a problem. The declarations to word wrap just will come in CSS3.
But try use this code:
<style>
#url { border:1px solid black; width:50px; }
p {border:1px solid blue; }
</style>
<script>
function wordWrap(){
/******
* wordWrap to firefox for big words
* Creative Commons license
* Version: 1.0 - 26/04/2006
* Autor: Micox - Náiron J.C.G - micoxjcg@yahoo.com.br - http://elmicoxcodes.blogspot.com
* Uso: call the function on onload of body element.
* put the class "word-wrap" on elements to wordwrap
*******/
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>
Just add word-wrap classname in elements to wrap
Bye. To the next
I don't think that it's the only way, is very complicated do it with just Javascript.
ReplyDeleteYes. Its complicated but i do all the work here, in this post.
ReplyDeleteNow, just you want to do is put my script in a .js file and put classname word-wrap in elements to wrap.
Now its simple.
Hi,
ReplyDeleteI want to THANKS YOU!...for this code!.... i had been looking for a way for do word-wrap in FireFox and IE, just found some forums with this discussion but without a realiable solution, until i found your blog, so i just wanted to add this comment in a way to say THANKS!...
Best Regards,
Manuel Ambulo
QUOTE->
ReplyDeleteAnonymous dijo...
I don't think that it's the only way, is very complicated do it with just Javascript.
<-QUOTE
But as far as i can see.....this is the ONLY way to do it, cuz even using CSS doesnt fix the problem, i went to another blog, (before reaching this one), of a guy that created a CSS class called ".HardBreak", i thought it could work in Firefox 2, but didnt worked, seems like it works on versions below FireFox 2. So i found MICOX's solution the best and UNIQUE way to do it (as far as i know right now). A lot of people (as i saw in my searches) uses it.
NOTE: THANKS AGAIN!
Best Regards,
Manuel Ambulo
Thanks Manuel,
ReplyDeleteBut my solution isn't complete yet.
Big link texts and another tags have problems with this solution. :-(
I'll work in a new solution. Thanks.
Yeah, i noted that just few minutes
ReplyDeleteafter yesterday, cuz i had something like this:
p> class=word-wrap>This is the link:http://www.link.com p>
In FireFox, seems like looks good, the link and paragraph appears as it should (as expected), but when i preview in IE (7.0), the links doesnt works, i was playing around with IE (6.0) and seems they work...something is weird, but anyway it helped me a lot, thats the only solution that appears to at least work with FireFox 2, i mean, its not perfect but it does work even its not perfect. So, as a result, is the best solution i found, even its not so perfect, but its the best. I found some forums that people are happy with your solution, thats a proof that looks good.
But i found another thing weird, FireFox seems to do word-wrap by its own when i create a table with text on it without using anything else, the problem arises when i use nested tables, i mean, tables inside tables. Try previewing this:
In an empty HTML document, make a table of 1 column and 1 row, with a width of 400 pixels, then inside the cell paste this:
Test word-wrap...Test word-wrap...Test word-wrap...Test word-wrap...Test word-wrap...Test word-wrap...Test word-wrap...Test word-wrap...Test word-wrap...Test word-wrap...Test word-wrap...Test word-wrap...Test word-wrap...Test word-wrap...Test word-wrap...Test word-wrap...Test word-wrap...Test word-wrap...Test word-wrap...Test word-wrap...Test word-wrap...Test word-wrap...Test word-wrap...Test word-wrap...Test word-wrap...Test word-wrap...Test word-wrap...Test word-wrap...Test word-wrap...Test word-wrap...Test word-wrap...Test word-wrap...Test word-wrap...Test word-wrap...Test word-wrap...
When i preview in FireFox 2, the table doesnt expands, it keeps the 400 pixels of limit i set (in others words its seems it performs somekind of word-wrapping, but if i make a webpage using nested tables and insert something like this somethings the table with tend to expand, thats where i use the solution :D ...
Best Regards,
Sorry by the looong text, and THANKS, again,
Manuel Ambulo
Bug:
ReplyDeleteunescape("%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
Hey thanks for the code....
ReplyDeleteMy problem is essentially with people pasting in big URLs. They will wnat to copy and paste them later.
ReplyDeleteVisually it seems fine, the FF browser does keep to a defined column width ... BUT, you can no longer copy and paste the URL, becase it has extra spaces now. Would it help to replace the spaces with BR tags, and where would I do that in your JS?
Hi tbob, try to change
ReplyDeletewhile(pos_quebra<=caracs){
quem.innerHTML = quem.innerHTML + texto.substring(pos_quebra,pos_quebra + quant_quebra) + " "
pos_quebra = pos_quebra + quant_quebra;
}
for this
while(pos_quebra<=caracs){
quem.innerHTML = quem.innerHTML + texto.substring(pos_quebra,pos_quebra + quant_quebra) + "(br /)"
pos_quebra = pos_quebra + quant_quebra;
}
PS.: change (br /) by the currect 'br' tag.
Unfortunately, this is not working for textarea where firefox is also having problem with word-wrapping.
ReplyDeletewow awesome,that worked for me.gr8 work dude
ReplyDeleteHi Micox, thanks. It works in firefox, but not in IE, for paragraph. In IE "textarea", long words wrap nicely, but in firefox Textarea, long words doesn't wrap. I was looking for a solution that can work inside the firefox textarea, by keeping the original text in another "input", while showing the altered text in the "textarea". Another person steve (sstchur) posted another solution to wrap by using XBL/XML, but his code doesn't work. If Micox's code algorithm is implemented inside Steve's code then that will be much better solution. I'll try to do that. Thanks again. ~ Tarik.
ReplyDeleteWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorksWorks
ReplyDeletelol @ anonymous (Jan 21, 2009).
ReplyDeleteWell played, sir.
This comment has been removed by the author.
ReplyDeleteThis comment has been removed by the author.
ReplyDeletenbsp and br tags some times break by your function in Fire Fox. Why is that??
ReplyDelete