HTML/CSS: ajuste el tamaño de la fuente para llenar el alto y ancho de los padres

Question

Tengo un elemento <div> que cambia de tamaño a medida que cambia el tamaño de la ventana del navegador.

Dentro de la <div> que tienen un párrafo de texto:

<div style="width:80%; height:80%; margin:10%;"> 
    <p>Paragraph of text. Paragraph of text. Paragraph of text.</p> 
</div> 

Quiero el texto para cambiar font-size como puedo cambiar el tamaño de la <div>, por lo que el texto se occuypy 100% del espacio disponible.

¿Cómo puedo lograr este efecto?
¿Sería con un tamaño de fuente porcentaje?
tendría que usar Javascript?

Gracias de antemano!

Answer 1

Hay un plugin jQuery para esto: http://fittextjs.com/

Answer 2

HTML

<div id="change" style="margin:10%;"> 
    <p>Paragraph of text. Paragraph of text. Paragraph of text.</p> 
</div> 

CSS

#change { 
    width: 80%; 
    height: 80%; 
    border: 1px solid black; 
    overflow: hidden; 
    font-size: 1em; 
} 

JavaScript

$(function() { 
    while($('#change div').height() > $('#change').height()) { 
     $('#change div').css('font-size', (parseInt($('#change div').css('font-size')) - 1) + "px"); 
    } 
}); 

Answer 3

fittext.js no lo hicieron funcionará correctamente para mí (plug-in para jQuery, así como derivados versión libre de jQuery), ni con el uso del atributo compresor, así que encontré otra solución:

http://www.dhtmlgoodies.com/?whichScript=text_fit_in_box (alguien es otra obra)

cuales funciona perfectamente para mí, textos más largos y textos más cortos.

Simplemente no reaccionan para cambiar el tamaño de la ventana (que funciona sólo una vez en la carga de la página), por lo que han escrito este código corto para ejecutarlo automáticamente después de cada cambio de tamaño de la ventana (que funciona para mí):

<script> 
     function calculate_font_sizes() 
     { 
     fitTextInBox('login-h1'); 
     fitTextInBox('subtittle'); 
     } 
     calculate_font_sizes(); 
     window.addEventListener('resize', calculate_font_sizes); 

</script> 

espero que pueda ayudar a alguien.

Answer 4

Mira la vw propiedades en CSS

http://www.w3schools.com/cssref/css_units.asp

Answer 5

Lo que necesita es llamado vw. Ejemplo CSS: font-size: 80vw;. vw significa ancho viewerport y 80vw = 80% de la anchura de la pantalla del dispositivo