Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Leandro Vieira Pinho

Quebra palavra (no FF) quando nao couber na DIV

Por , em Javascript

Recommended Posts

Leandro Vieira Pinho    0

Leandro Vieira Pinho
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

micox    2

micox
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

micox    2

micox
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

micox    2

micox
Postado

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>

Compartilhar este post

Link para o post
Compartilhar em outros sites

fabricioblz    0

fabricioblz
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito