jQuery determine if element has a fixed or dynamic width

Question

The following code decreases the font size of text in an element where the text is cut off because the width of the element is too small, until it either fits within the width of the element or the font hits the minimum size.

It works perfectly for elements that have a fixed width; BUT it doesn't work with elements that don't have a fixed width because their width can change.

I need to find a way to stop it from shrinking the text of elements without a fixed width automatically, ALTHOUGH it should still shrink them if the text is cut off.

var sizer = document.createElement('div'); 
sizer.id = 'Sizer';
sizer.style.position = 'absolute';
sizer.style.top = '-9999px';
sizer.style.left = '-9999px';
$(document.body).append(sizer);

sizer = $("#Sizer");
element = $(element);
var min = 10;

sizer.text(value);

var size = parseInt(element.css('font-size'));
sizer.css('font-size', size);

while (sizer.width() > element.width() && size > min) {
    size--;
    sizer.css('font-size', size);
}

$(element).css('font-size', size);

sizer.remove()

Ties · Answer 1 · 2014-07-19T13:23:26.193

Maybe you should try this

function setFontSize(elem) {
  // get current font-size
  var fontSize = parseInt(elem.css('font-size'), 10);
  // init sizer
  var sizer = $('<div>').css({
    position:'absolute',
    left:'-9999em',
    top:'-9999em',
    fontSize:fontSize
  }).appendTo('body');
  // get original width
  var originalWidthElem = elem.width();
  // copy text to sizer
  sizer.text( elem.text() );
  // check if sizer is larger
  if(sizer.width() > elem.width()) {
    // loop till font is small enough
    while(sizer.width() > elem.width() && fontSize > 0) {
      fontSize--;
      sizer.css('font-size', fontSize);
    }
  }
  // check if sizer is smaller
  else if(sizer.width() < elem.width()) {
    // loop till font is large enough
    while(sizer.width() <= elem.width()) {
      fontSize++
      sizer.css('font-size', fontSize);
    }
    // font is one to large
    fontSize--;
  }
  // set font size
  elem.css('font-size', fontSize);
  // remove sizer
  sizer.remove();
}
setFontSize( $('#a') );

demo

i updated the code to use `sizer` instead of `element` how 'bout now? — Ties, Jul 18 '14 at 11:56
still doesn't work correctly... shrinks text without defined width still :\ — ism, Jul 18 '14 at 14:35

jQuery determine if element has a fixed or dynamic width

1 Answers1