我正在尝试遍历文本的一些跨度,并根据所需的最小字体大小调整文本大小以适应其包含的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
发布于 2012-11-27 06:36:34
在循环之后添加一个条件来检查您是否做得太过了:
if ($(this).width() > $("#test").width()) {
currentFontSize--;
}http://jsfiddle.net/H7nrY/5/
https://stackoverflow.com/questions/13573925
复制相似问题