Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/jquery/69.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
jQuery文本大小调整问题_Jquery_Css - Fatal编程技术网

jQuery文本大小调整问题

jQuery文本大小调整问题,jquery,css,Jquery,Css,我正在尝试循环浏览一些文本跨度,并根据所需的最小字体大小调整文本大小,以适应其包含的div <div id="preview"> <div id="test"> <section class="slide"> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />

我正在尝试循环浏览一些文本跨度,并根据所需的最小字体大小调整文本大小,以适应其包含的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 -->

Lorem ipsum dolor sit amet,一位杰出的领导者。
mauris中的Nam是velit中的一个大元素 无便利条件。
这是一种发酵剂。 粗粗粗粗粗粗粗粗粗粗粗粗粗粗粗粗粗粗粗粗粗粗粗粗粗粗粗粗粗粗粗粗粗粗粗粗粗粗粗粗粗粗粗粗粗粗粗粗粗粗粗粗粗粗粗粗粗粗粗粗粗粗粗粗粗粗粗粗粗粗 库拉比图尔·利伯罗·夸姆(Curabitur libero quam),库苏斯坐在阿梅特·费吉亚特(amet feugiat id)的位子上,是莱克图斯的元素。
阿迪皮斯奇的阿利奎特·马萨的整数。
狮子座purus Vivamus
到目前为止,我必须做的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);
});​
var fontSizeArray=[];
$('#test>.slide')。子项('span')。每个(函数(){
var currentFontSize=parseInt($(this.css('font-size'));
做{
currentFontSize=currentFontSize+1;
$(this).css('font-size',currentFontSize);
}而($(this.width()<$('#test').width());
fontSizeArray.push(当前FontSize);
});
var minimest=Math.min.apply(null,fontSizeArray);
$('#test>.slide')。子项('span')。每个(函数(){
$(this.css('font-size',最小);
});​
为了更好地说明这一点,我制作了一把小提琴


基本上,所有文本都应该调整大小以适应div#test

在循环后添加一个条件,检查是否走得太远:

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

所有
span
是否应具有相同的
字体大小
(因此您受到最长文本行的
字体大小
的限制)?或者每个
span
的尺寸是否分别确定?
font size
是否受父
div
元素的垂直高度限制,或者
div
是否允许垂直扩展?@DavidThomas是的,所有跨距都应具有相同的字体大小。是的,字体大小将受到垂直高度的限制,以及每个跨距的限制。我只是想把宽度排序,然后再看看高度。但是如果你对这两者都有一个解决方案…这可能会有帮助:也看看这里,可能有一些你需要做的事情:告诉我-while循环的问题是,根据逻辑,它不会退出,直到你走得太远,因此,您必须跳转到最后一种字体。@Kmfk要将其构建到循环的逻辑中,还是需要将其分开?@Stephen可能,但在循环退出后,只减少
currentFontSize
似乎更容易。您知道循环已退出,因为范围现在比您想要的大,这表明前面的字体是上限。