jQuery文本調整大小問題

我正在嘗試遍歷文本的一些範圍，並根據所需的最小字體大小調整文本以適合其包含的div。jQuery文本調整大小問題

<div id="preview">   
     <div id="test"> 
      <section class="slide"> 
       <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br /> 
       Nam in mauris a magna elementum ornare vel at velit.<br /> 
       Nulla facilisi.<br /> 
       Sed eu odio id urna fermentum imperdiet eget sit amet enim.</span> 
      </section> 

      <section class="slide"> 
       <span>Cras cursus ante et tortor placerat sodales.<br /> 
       Curabitur libero quam, cursus sit amet feugiat id, elementum at lectus.<br /> 
       Integer volutpat aliquet massa at adipiscing.<br /> 
       Vivamus purus leo</span> 
      </section> 
     </div><!--/ #test --> 
    </div><!--/ #preview -->

我的jQuery我必須這樣做，迄今

var fontSizeArray = []; 

$('#test > .slide').children('span').each(function() { 
    var currentFontSize = parseInt($(this).css('font-size')); 
    do { 
     currentFontSize = currentFontSize + 1; 
     $(this).css('font-size', currentFontSize);    
    } while ($(this).width() < $('#test').width()); 
    fontSizeArray.push(currentFontSize); 
}); 

var smallest = Math.min.apply(null, fontSizeArray);  

$('#test > .slide').children('span').each(function() { 
    $(this).css('font-size', smallest); 
});

我創建了一個小提琴，以更好地說明這一點。

http://jsfiddle.net/H7nrY/4/

基本上所有的文字應該調整到專區內適合#TEST

來源

2012-11-26 Stephen

是否所有的'span's都有* * * font-size'（所以你受到最長文本行的font-size限制）？或者是每個「跨越」單獨大小？ 'font-size'是受父'div'元素垂直高度限制的，還是'div'允許垂直擴展？ –

@DavidThomas是的所有跨度應該有相同的字體大小。是的，字體大小將受到垂直高度以及每個跨度的限制。只是試圖獲得排序的寬度，然後我將看看高度。但是，如果你有一個解決方案... – Stephen

這可能會有所幫助：http://stackoverflow.com/questions/2989950/auto-resize-text-font-size-when-resizing-window另外看看這裏，有可能是你需要做的事情：http://sixrevisions.com/javascript/jquery-plugins-typography/ –

添加一個條件來檢查，如果你已經走得太遠循環後：

if ($(this).width() > $("#test").width()) { 
    currentFontSize--; 
}

http://jsfiddle.net/H7nrY/5/

來源

2012-11-26 22:36:33

打我說 - 與while循環的問題是基於邏輯，它不會退出，直到你太過分了，所以你不得不下降到最後一個字體。 – kmfk

@Kmfk無論如何建立這個循環的邏輯或它需要分開？ – Stephen

@Stephen可能，但在循環退出後，似乎更容易減少'currentFontSize'。您知道循環已退出，因爲跨度現在比您想要的大，這會告訴您之前的字體是上限。 – kmfk

jQuery文本調整大小問題

回答

相關問題