Thursday, 15 January 2015

jquery - Fit text perfectly inside a div (height and width) without affecting the size of the div -



jquery - Fit text perfectly inside a div (height and width) without affecting the size of the div -

i apologise in advance know question has come many times before can't seem find right solution (and believe me i've tried few!)

basically it's old "fit text within div without affecting size of div". , unless i'm finish numpty, believe css has no way of doing this. mean rather doing like:

#somediv { font-size: 12px; }

or...

#somediv { font-size: 1em; }

...i want able this:

#somediv { font-size: fluid; }

...meaning whatever text div contains, scale fit left right , top bottom no overflow or whitespace.

after trawling through countless websites looking css solution, i've accepted css isn't capable of ...so, come in jquery.

i've found several jquery solutions online scale text fit width, want scale height well. want jquery:

"jquery, find $(this) div , whatever text within want scale fills entire height , width of div tightly possible".

in case haven't explained myself well, i've attached graphic explaining problem i'm facing , solution i'm looking for.

any help much appreciated. give thanks you.

here's same answer, in javascript

var autosizetext; autosizetext = function() { var el, elements, _i, _len, _results; elements = $('.resize'); console.log(elements); if (elements.length < 0) { return; } _results = []; (_i = 0, _len = elements.length; _i < _len; _i++) { el = elements[_i]; _results.push((function(el) { var resizetext, _results1; resizetext = function() { var elnewfontsize; elnewfontsize = (parseint($(el).css('font-size').slice(0, -2)) - 1) + 'px'; homecoming $(el).css('font-size', elnewfontsize); }; _results1 = []; while (el.scrollheight > el.offsetheight) { _results1.push(resizetext()); } homecoming _results1; })(el)); } homecoming _results; }; $(document).ready(function() { homecoming autosizetext(); });

by way...if ever need convert coffeescript javascript, go js2coffee.org

jquery css font-size

No comments:

Post a Comment