jQuery文本调整大小问题答案

【问题标题】：jQuery text resize issuejQuery文本调整大小问题
【发布时间】：2012-11-26 22:03:34
【问题描述】：

我正在尝试遍历一些文本范围，并根据这样做所需的最小字体大小调整文本大小以适应其包含的 div。

<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/

基本上所有文本都应该调整大小以适应 div #test

【问题讨论】：

应该所有的spans 都有same font-size （所以你受到最长文本行的font-size 的限制）？还是每个span 的大小都是单独的？ font-size 是否受父 div 元素的垂直高度限制，或者div 是否允许垂直扩展？
@DavidThomas 是的，所有跨度都应该具有相同的字体大小。是的，字体大小将受到垂直高度以及每个跨度的限制。只是想对宽度进行排序，然后我要查看高度。但是，如果您对两者都有解决方案...
这可能会有所帮助：stackoverflow.com/questions/2989950/… 也看看这里，可能有一些事情要做你需要做的事情：sixrevisions.com/javascript/jquery-plugins-typography

标签： jquery css

【解决方案1】：

在循环之后添加一个条件来检查你是否走得太远：

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

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

【讨论】：

击败了我 - while 循环的问题是，根据逻辑，它不会退出，直到你走得太远，所以你必须降级到最后一个字体。
@Kmfk 无论如何要将其构建到循环的逻辑中还是需要分开？
@Stephen 可能，但在循环退出后减少 currentFontSize 似乎仍然更容易。你知道循环退出了，因为跨度现在比你想要的大，这告诉你以前的字体是上限。