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/
$(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. – Bacco♦ 27/09/16 às 18:49
-
-
1
-
@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. – Taisbevalle 27/09/16 à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 – joao paulo santos almeida 27/09/16 às 16:59 -
usa % em vez de um valor css-tricks.com/almanac/properties/f/font-size – Jasar Orion 27/09/16 às 17:04
-
Colocando porcentagem até que vai, mas quando o texto e muito pequeno a fonte continua pequena não se ajusta. – joao paulo santos almeida 27/09/16 à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 – Jasar Orion 27/09/16 à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 :( – joao paulo santos almeida 27/09/16 às 17:03
-
posta como está o teu código então, tanto o html como o css – Joel Piccoli da Rosa 27/09/16 às 17:04
-
editei coloquei um link para o jsfiddle com o meu problema – joao paulo santos almeida 27/09/16 à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... – Joel Piccoli da Rosa 27/09/16 às 17:23