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

demo