Question

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

Answer 1

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

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

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

jQuery文本调整大小问题

1 个答案: