1

我正在尝试遍历一些文本范围，并根据这样做所需的最小字体大小调整文本大小以适应其包含的 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

4

1 回答 1

2

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

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

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

于 2012-11-26T22:36:33.530 回答