HTML/CSS: regola la dimensione del carattere per riempire l'altezza e la larghezza del genitore

Question

Ho un elemento <div> che viene ridimensionato quando la finestra del browser viene ridimensionata.

All'interno del <div> ho un paragrafo di testo:

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

voglio il testo per cambiare font-size come ho ridimensionare il <div>, in modo che il testo sarà occuypy il 100% dello spazio disponibile.

Come posso ottenere questo effetto?
Sarebbe con una dimensione in caratteri percentuali?
Dovrei usare Javascript?

Grazie in anticipo!

Answer 1

C'è un plugin jQuery per questo: 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 funzionare correttamente per me (plug-in per jQuery, così come derivato versione senza jQuery), né con l'utilizzo di un attributo del compressore, così ho trovato un'altra soluzione:

http://www.dhtmlgoodies.com/?whichScript=text_fit_in_box (qualcuno è un altro lavoro)

che funziona perfettamente per me - testi più lunghi e testi più brevi.

Semplicemente non reagiscono a ridimensionare di finestra (funziona solo una volta sul caricamento della pagina), così ho scritto questo breve codice per eseguire automaticamente dopo ogni ridimensionamento finestra (che funziona per me):

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

</script> 

Spero possa aiutare qualcuno.

Answer 4

Partenza le proprietà VW in css

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

Answer 5

Quello che vi serve è chiamato vw. Esempio CSS: font-size: 80vw;. vw significa larghezza viewerport, e 80vw = 80% della larghezza dello schermo del dispositivo