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 に答える