Jak w pętli zmniejszać rozmiar fonta, aż do zmieszczenia tekstu w boksie

Chciałem napisać skrypcik, który zmniejsza czcionkę w zależności od szerokości tekstu względem szerokości okna. Wszystko miało się wykonać w jednej pętli for i w niej zagnieżdżonej pętli do-while.
A jednak mam dziwny błąd, kod wydaje się poprawny(składniowo), nie wywala żadnego błędu a jednak pętla for się nie wykonuje.

O to kod:

var p = jQuery.makeArray($('#portfolio').find('p'));
		console.log(p.length);
		p.reverse(); 
		for(var i=0;i<(p.lenght);i++){
			console.log('p '+i+': '+p[0]);
			do{
				if(p[i].width()>240){
					p[i].css('font-size',p[i].css('font-size')-1);
				}
			}while(p[i].width()>240);		
		}

Kod oczywiście wyświetla na początku w konsoli wielkość tablicy równą 5, ale pętli for w ogóle nie wykonuje :(.

Co jest tego powodem?

length, a nie lenght.

Na pierwszy rzut oka, można kod uprościć do takiej postaci:

var p = jQuery.makeArray($('#portfolio').find('p'));
        console.log(p.length);
        p.reverse(); 
        for(var i=0;i<(p.length);i++){
            console.log('p '+i+': '+p[0]);
            while(p[i].width()>240){
                p[i].css('font-size',p[i].css('font-size')-1);
            }
        }

a po co JavaScript? Nie lepiej użyć media queries w CSS?

LukeJL napisał(a):

a po co JavaScript? Nie lepiej użyć media queries w CSS?

rly?

--------------------| (LIMIT)

TEST

XXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Jak w CSS chcesz zostawic domyslna wielkosc, przy zadanym limicie, a pozostale proporcjonalnie pomniejszac? ;>

Niestety mój sposób nie działał, ponieważ sekcja

zawsze zwracała szerokość (width) równą 0 ;/.
Ale znalazłem rozwiązanie za pomocą CSS i transform:

top:70%;
left:50%;
transform: translate(-50%, -50%);	

Elegancko mi ustawia tekst u dołu okienka po czym go wyśrodkowuje, zaś w przypadku zawiniętego tekstu, jego wysokość jest większa przez co przesuwa się w górę :D.