Question

我有一个div，它有一个固定的高度和一个流体宽度（宽度为body的15％）。我希望里面的段落文字完全填满div;不溢出而不是底部填充。

我尝试使用jQuery增加文本大小，直到段落的高度等于容器div的高度。此时，文本应完全覆盖div。唯一的问题是字体大小以0.5px值递增。你不能做33.3px;它必须是33.0px或33.5px。因此，在33px时，我的文字太短而不能覆盖div，并且在33.5px处溢出。

有没有人对如何解决这个问题有任何想法？有很多插件可以使文本填充容器的整个宽度，但不能用于填充宽度和高度的文本。至少，我没见过。

<head>
<style type="text/css">
.box {
    display:block;
    position:relative;
    width:15%;
    height:500px;
    background:orange;
}
    .box p {
        background:rgba(0,0,0,.1); /* For clarity */
    }
</style>
</head>

<body>

<div class="box">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br><br>
    Suspendisse varius nibh quis urna porttitor, pharetra elementum nisl egestas. Suspendisse libero lacus, faucibus id convallis sit amet, consequat vitae odio.</p>
</div>

<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
function responsiveText(){
    var i = 0.5;

    do {
        $(".box p").css("font-size",(i) + "px");

        var textHeight          =  $(".box p").height(),
            containerHeight     =  $(".box").height();
        i += 0.5;   

    } while ( textHeight < containerHeight );           // While the height of the paragraph block is less than the height of the container, run the do...while loop.
} responsiveText();


$(window).resize(function(e) {
    responsiveText();
});
</script>
</body>

Text set at 33px. It is too short. 文字设置为33px。它太短了。

Text set at 33.5px. It overflows. 文字设置为33.5px。它溢出了。

Answer 1

I adjusted your function使用em单位而不是px，并将增量从“0.5”调整为“0.003”。

预览窗格有点不可靠，所以check it out in its own window。

请记住：

增量越大，循环迭代次数越少（越少）处理）。
增量越小，调整越“精细” 结果。

调整文本大小以完全填充容器

1 个答案: