テキストのいくつかのスパンをループし、必要な最小のフォントサイズに基づいて、含まれている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);
});
これをわかりやすく説明するためにフィドルを作成しました。
基本的に、すべてのテキストはdiv#test内に収まるようにサイズ変更する必要があります