iMasters Fóruns: Quebra palavra (no FF) quando nao couber na DIV - iMasters Fóruns

Ir para

Bom uso da área



Atenção:
Este subfórum é destinado apenas para postagem de scripts prontos e testados para auxiliar os demais membros.
Não é permitido a abertura de tópicos com dúvidas. Para isso, use o Fórum de javascript.
Página 1 de 1
  • Novo tópico
  • Responder

Quebra palavra (no FF) quando nao couber na DIV

#1 Membro offline   Leandro Vieira Pinho Ícone

  • Ícone
  • Grupo: Membros
  • Posts: 959
  • Cadastrado: 18-julho 04
  • Localização:Governador Valadares - MG

Postou 24 abril 2006 - 13:56

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:

Quote

#url {
width: 400px;
}


Bom, no Firefox, ficará assim:

Quote



No IE, assim:

URL
http://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.

#2 Membro offline   micox Ícone

  • elmicox.blogspot.com
  • Ícone
  • Grupo: Membros
  • Posts: 2334
  • Cadastrado: 31-maio 03
  • Localização:Goiânia/GO

Postou 26 abril 2006 - 14:53

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

#3 Membro offline   Leandro Vieira Pinho Ícone

  • Ícone
  • Grupo: Membros
  • Posts: 959
  • Cadastrado: 18-julho 04
  • Localização:Governador Valadares - MG

Postou 26 abril 2006 - 14:56

Testarei e retorno um feedback

#4 Membro offline   Leandro Vieira Pinho Ícone

  • Ícone
  • Grupo: Membros
  • Posts: 959
  • Cadastrado: 18-julho 04
  • Localização:Governador Valadares - MG

Postou 28 abril 2006 - 15:23

Funcionou legal, parabéns.

Depois analisarei o código com calma.

um abraço.

#5 Membro offline   micox Ícone

  • elmicox.blogspot.com
  • Ícone
  • Grupo: Membros
  • Posts: 2334
  • Cadastrado: 31-maio 03
  • Localização:Goiânia/GO

Postou 28 abril 2006 - 15:27

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

#6 Membro offline   Leandro Vieira Pinho Ícone

  • Ícone
  • Grupo: Membros
  • Posts: 959
  • Cadastrado: 18-julho 04
  • Localização:Governador Valadares - MG

Postou 28 abril 2006 - 15:29

Ótima idéia.

Muitas pessoas irão agradecer por ele.

#7 Membro offline   micox Ícone

  • elmicox.blogspot.com
  • Ícone
  • Grupo: Membros
  • Posts: 2334
  • Cadastrado: 31-maio 03
  • Localização:Goiânia/GO

Postou 28 abril 2006 - 15:45

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 javascript
document.location = forum_javascript
</script>

#8 Membro offline   Leandro Vieira Pinho Ícone

  • Ícone
  • Grupo: Membros
  • Posts: 959
  • Cadastrado: 18-julho 04
  • Localização:Governador Valadares - MG

Postou 28 abril 2006 - 15:48

Fique à vontade.

Um abraço.

Página 1 de 1
  • Novo tópico
  • Responder

1 usuário(s) está(ão) lendo este tópico
0 membro(s), 1 visitante(s) e 0 membros anônimo(s)