Publicado em 3 de fev.

Limitar o tamanho de um texto em uma DIV

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

Discussão (1)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

klonder· 3 de fev.

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>