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文本调整大小问题

回答

相关问题