Olá, tenho uma div de 300px
por 300px
, nela eu deixo um texto que vem de um banco de dados, o problema é que tem vezes em que o texto dentro da div ultrapassa o tamanho da mesma, deixando invavel para impressão. Eu preciso saber se tem como redimentcionar automaticamente o tamanho da fonte para que o texto da div
nunca ultrapasse 300px
de altura e nem de largura.
veja como o problema em
http://jsfiddle.net/xVB3t/1747/
5 Respostas
$(document).ready(function() {
$('#conteudo').textfill({
maxFontPixels: 12
});
});
#conteudo {
width: 300px;
height: 300px;
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://jquery-textfill.github.io/js/textfill/jquery.textfill.js"></script>
<div id="conteudo">
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat at tortor sit amet euismod. Pellentesque dapibus bibendum felis, sit amet consectetur eros condimentum in. Cras efficitur tellus id lectus sagittis tincidunt. Aliquam imperdiet sem at laoreet elementum. Curabitur aliquam gravida varius. Praesent id pulvinar nulla. Mauris ultricies iaculis augue bibendum consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat at tortor sit amet euismod. Pellentesque dapibus bibendum felis, sit amet consectetur eros condimentum in. Cras efficitur tellus id lectus sagittis tincidunt. Aliquam imperdiet sem at laoreet elementum. Curabitur aliquam gravida varius. Praesent id pulvinar nulla. Mauris ultricies iaculis augue bibendum consequat.
</span>
</div>
Utilizei o plugin jQuery textfill. Ele redimensiona a fonte de acordo com a div. Realizei alguns testes com o preview de impressão do Chrome e no IE 11 e manteve o tamanho da fonte.
Para resolver esse problema das palavras ultrapassarem a div
, você pode usar a propriedade overflow: auto;
No seu exemplo ficaria assim:
div {
font-size: 100%;
border: 1px solid red;
height: 200px;
width: 200px;
overflow: auto;
}
Veja no JSFiddle.
-
Oi Tais. Ele pede uma div fixa 300x300. O texto é que precisa diminuir automaticamente.– Largato ♦Commented 27/09/2016 às 18:49
-
-
1De fato, até hoje só vi com JS mesmo. E nenhum muito simples não.– Largato ♦Commented 27/09/2016 às 19:08
-
@Bacco, pois é, com JS tem como, mas eu não sei qual o objetivo dele. Na minha opinião, pensando na usabilidade, é melhor o usuário dar um scroll, do que a letra diminuir o tamanho. Commented 27/09/2016 às 19:14
Também da para fazer ajustando o scaleY do conteúdo dentro do container:
$(function() {
$('.container').each(function() {
var scaleY = $(this).height() / $('.conteudo', this).height(),
translateY = (($('.conteudo', this).height() - $(this).height()) / 2) * -1;
$('.conteudo', this).css({
'-webkit-transform': 'matrix(1,0,0,' + scaleY + ',0,' + translateY + ')',
'-moz-transform': 'scaleY(1,0,0,' + scaleY + ',0,' + translateY + ')',
'-ms-transform': 'scaleY(1,0,0,' + scaleY + ',0,' + translateY + ')',
'-o-transform': 'scaleY(1,0,0,' + scaleY + ',0,' + translateY + ')',
'transform': 'scaleY(1,0,0,' + scaleY + ',0,' + translateY + ')'
});
});
});
.container {
float: left;
font-size: 100%;
border: 1px solid red;
height: 200px;
width: 200px;
margin-right: 10px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="conteudo">
Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe
</div>
</div>
<div class="container">
<div class="conteudo">
Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola
Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe
</div>
</div>
tenta isso aqui a função se chama "Viewport Sized Typography" ou em termos chulos texto escalonável tela visualização da tela.
p {font-size: 16px; font-size: 4vw;}
consulte mais informações e outras funções em
https://css-tricks.com/viewport-sized-typography/
olha um exemplo
-
Eu preciso de acordo com o tamanho da div, eu até achei uma forma parecida que funcionava mais ou menos usando
font-size: 2.6vmin;
mas só ajuda a fonte de acordo com a janela e não de acordo com a div Commented 27/09/2016 às 16:59 -
usa % em vez de um valor css-tricks.com/almanac/properties/f/font-size Commented 27/09/2016 às 17:04
-
Colocando porcentagem até que vai, mas quando o texto e muito pequeno a fonte continua pequena não se ajusta. Commented 27/09/2016 às 17:11
-
agora é questão de ajuste, da uma lida nisto aqui web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax Commented 27/09/2016 às 17:13
-
Nesses casos o bom é usar em ao invés de px para o tamanho da fonte, você pode ver mais sobre isso aqui: http://www.w3schools.com/cssref/css_units.asp.
Também, o texto não deveria estourar o container dele, a menos que não existam espaços nesse teu texto, então no container use a propriedade word-wrap (http://www.w3schools.com/cssref/css3_pr_word-wrap.asp).
Caso não resolva teu problema, poste aqui teu código para podermos ajudar mais...
-
Já tentei assim mudando as unidades de medidas, não funcionou :( Commented 27/09/2016 às 17:03
-
posta como está o teu código então, tanto o html como o css Commented 27/09/2016 às 17:04
-
editei coloquei um link para o jsfiddle com o meu problema Commented 27/09/2016 às 17:12
-
eu havia compreendido o seu problema de forma errada @joaopaulosantosalmeida, a princípio não sei se existe uma solução para fazer isso de forma efetiva, mas vou dar uma olhada... Commented 27/09/2016 às 17:23