2
I created this small extension of jQuery that aims to reduce the size of the text by setting font-size
CSS based on the overflow
of its container.
The operation is simple, find the current font size and remove a pixel from it, then apply a new CSS definition to the element in question:
;(function ($) {
$.fn.fitWidth = function( options ) {
var opts = $.extend({
min: "11"
}, options );
var tamanho = parseInt(this.css('font-size'));
if (tamanho > opts.min) {
return this.css({
'font-size': tamanho-1
});
}
};
}( jQuery ));
However, there is a problem:
If the letter indicated by the user, or even the default minimum value is not low enough to avoid the overflow
, the call of this extension will cause an infinite cycle:
$('#wrap span').each(function(){
var $this = $(this),
overflow = $this[0].scrollWidth > $this.width() ? true : false;
if (overflow) {
while (overflow) {
$this.fitWidth({"min":'1'});
overflow = $this[0].scrollWidth > $this.width() ? true : false;
}
}
});
With minimum letter a 11 for example, we will have an infinite cycle.
Example in Jsfiddle to a minimum of 1, but beware of changing the value to test, an infinite cycle of Javascript can cause the browser to work.
Question:
How can I change the extension or the call of it to avoid endless cycles?