Ir para conteúdo

POWERED BY:

Arquivado

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

Lud-RP

Limitar o tamanho de um texto em uma DIV

Por , em Javascript

Recommended Posts

Lud-RP    0

Lud-RP
Postado

Seguinte galera,

to com o seguinte problema..

 

Tenho que determinar o tamanho de um texto de acordo com o tamanho da div onde ele está.

 

basicamente é o seguinte, tenho o seguinte texto:

 

$variavel = "TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE";

 

<div id="div_teste"><?php echo $variavel;?></div>

 

Isto vai fazer com que dentro da div "div_teste" apareça o texto na $variavel certo?

 

Bom, no PHP eu consigo determinar a quantidade máxima de caracteres a serem exibidos através de: ... echo substr($variavel, 0, 80);

Desta forma vai exibir apenas os 80 caracteres certo?

 

o problema é que nem sempre os 80 caracteres vão preencher toda a div e as vezes vão estourar o limite de tamanho, por exemplo... <div id="" style="width: 80px; height: 50px;"></div>

 

certa vez vi por ai, mas não me lembro onde, uma função em JavaScript que definia o tamanho do texto de acordo com o tamanho da div.

 

alguem ai ja viu?

 

vlew

.. abraços

Compartilhar este post

Link para o post
Compartilhar em outros sites

klonder    14

klonder
Postado

Fiz alguns testes aqui e, posso estar enganado, mas creio que deixar a div "completamente" ocupada com letras é um pouco complicado de se fazer (quando digo completamente ocupada quero dizer: COMPLETAMENTE ocupada mesmo, sem nenhum espaço sobrando (sem letras ou espaço entre letras), ou seja, não haveria nenhum local com DOIS OU MAIS ESPAÇOS consecutivos).

 

Nas palavras existem muitas variações que interferem no comprimento de uma string:

1. Quantidade de letras maiúsculas x minúsculas;

2. Às vezes uma palavra, por ser extensa, não é quebrada e é jogada completamente para a linha de baixo;

3. Há diferença de tamanho mesmo entre letras minúsculas (ex: o "m" é mais comprido que o "i");

4. Mesmo se você for tentar corrigir o item 3 acima, utilizando a fonte "Lucida Console" do Bloco de notas, você acabará caindo no item 2.

 

Por isso, o que consegui fazer foi um código que utiliza uma div 150x150 que recebe um texto escolhido aleatoriamente dentre 3 textos quaisquer, que deixa alguns espaços consecutivos na última linha, justamente para compensar as diferenças de comprimento mencionadas acima.

 

Segue o código pronto:

<html><head>
<script type="text/javascript">
//Script by Klonder
function artigo1() {
var div1 = document.getElementById("artigo1");
var texto = new Array();
texto[0] = "Bom, no PHP eu consigo determinar a quantidade máxima de caracteres a serem exibidos através de: ... echo substr($variavel, 0, 80) Desta forma vai exibir apenas os 80 caracteres certo? o problema é que nem sempre os 80 caracteres vão preencher toda a div e as vezes vão estourar o limite de tamanho, por exemplo...";

texto[1] = "Ajax é a abreviação para 'Asynchronous Javascript and XML'. O objetivo dessa técnica é criar aplicações Web mais interativas e dinâmicas melhorando assim a experiência do usuário. Ajax não é uma tecnologia mas sim um termo que se refere ao uso de um grupo de tecnologias integradas (HTML/XHTML + XML/XSLT + CSS + DOM + Javascript + XMLHttpRequest). Fórum Moderado por: klaygomes, Otata, Darkdemo";

texto[2] = "O esperado clássico com a Itália começa a ganhar tom de 'esvaziado'. Após o corte de Luis Fabiano e o veto da Juventus para liberar Amauri, Dunga também não poderá contar com Anderson no amistoso da seleção brasileira no dia 10 contra os atuais campeões do mundo. O meia do Manchester United foi cortado na noite desta segunda-feira por causa de uma contusão. Luis Fabiano (à esq.), Amauri e Anderson (d) estão fora do jogo do Brasil com a Itália.";

var artigoAtual = random(0,2);
div1.style.width = "150px";
div1.style.height = "150px";
div1.style.border = "#AAAAAA 1px dashed";
//div1.style.textAlign = "justify";
div1.innerHTML = texto[artigoAtual].substr(0,160)+"...";
}

function random(i,f) {
if (i > f) {numInicial = f;numFinal = i+1;}else{numInicial = i;numFinal = f+1;}
numRandom = Math.floor((Math.random()*(numFinal-numInicial))+numInicial);return numRandom;
}

</script>
</head>
<body onLoad="artigo1()">
<div id="artigo1"></div>
</body></html>

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