jQuery决定元素是固定宽度还是动态宽度

Question

对于由于元素宽度过小而被截断的元素，下面的代码将减小该元素中的文本的字体大小，直到它符合元素的宽度或字体达到最小尺寸。

对于具有固定宽度的元素，它可以完美地工作;但它不适用于没有固定宽度的元素，因为它们的宽度可以改变。

我需要找到一种方法来阻止它自动缩小没有固定宽度的元素的文本，虽然如果文本被切断，它仍然应该缩小它们。

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()

Answer 1

也许你应该试试这个

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') );

演示