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

演示