Publicado em 24 de abr.

Quebra palavra (no FF) quando nao couber na DIV

Olá,Suponhamos que tenho a seguinte marcação:

<div id="url"> <p>URL:</p> <p>http://www.google.com.br/search?hl=pt-BR&q=blableblibloblu&btnG=Pesquisa+Google&meta= </p></div>E essa declaração CSS:

#url {width: 400px;}Bom, no Firefox, ficará assim:

URLhttp://www.google.com.br/search?hl=pt-BR&q...Pesquisa+Google

No IE, assim:URLhttp://www.google.com.br/search?hl=pt-BR&q=plugsites&btnG=Pesquisa+Google&meta=

Bom, preciso que o FF, renderize a URL semelhante ao IE, ou seja, ela não pode ultrapassar os 400px definido para o tamanho do box. Alguma dica? Valeu.

Discussão (8)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

micox· 26 de abr.

Ae cara, depois de ficar 3 horas procurando uma solução na net na referencia oficial do mozilla e do msdn, e não encontrando (a solução só chegará com o CSS3).

Eu ralei a cabeça e fiquei mais algumas horas desenvolvendo esta função que faz a quebra de palavras. A tão desejada word-wrap para Firefox.

Foi testado com sucesso no FF1.5 e no IE6.

Por favor, se for usar não tire meus nomes dos crétidos :)

Também postei esta solução de quebra palavras para FF no meu blog.

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

Tags pra busca: word wrap word-wrap quebra palavra linha texto palavras grandes largura width firefox ff ie internet explorer overflow nao cabe estoura layout.

Testem ae...

Leandro Vieira Pinho· 26 de abr.

Testarei e retorno um feedback

Leandro Vieira Pinho· 28 de abr.

Funcionou legal, parabéns.Depois analisarei o código com calma.um abraço.

micox· 28 de abr.

Eu ralei pra fazer este código. Vou colocar ele como dica e ver se mando pro laboratorio de scripts do fórum_javascript.

Leandro Vieira Pinho· 28 de abr.

Ótima idéia.Muitas pessoas irão agradecer por ele.

micox· 28 de abr.

Ok.Com a sua licença mudei o título do post e irei move-lo para o Laboratório de scripts de Javascript.<script>//movido para javascriptdocument.location = forum_javascript</script>

Leandro Vieira Pinho· 28 de abr.

Fique à vontade.Um abraço.

fabricioblz· 5 de mar.

Tive problemas com o seguinte.

eu recebo as informacoes do banco de dados atravez do FCKeditor, entao o conteudo vem com paragrafos, e eu nao sei como colocar a classe "word-warp" em paragrafos que vem do FCKeditor

ex:

<p class="word-wrap">

 <?=$vetDados[$i][3]?> // neste vetor vai ter um conteudo assim por exemplo:"<p>eu cou um conteudo e nao tem como colocar classe em mim</p>"

</p>

como sua funcao so eh aplicada a paragrafos qeu tenham essa classe entao nao acontece nada...

alguem tem alguma solucao??