gpt4 book ai didi

javascript - 调整文本大小以完全填满容器

转载 作者:太空狗 更新时间:2023-10-29 15:08:20 24 4
gpt4 key购买 nike

我有一个具有固定高度和可变宽度(body 宽度的 15%)的 div。我想让里面的段落文字完全填满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.5 像素。它溢出了。

最佳答案

I adjusted your function使用em单位代替px,并将增量从“0.5”调整为“0.003”。

预览面板有点不可靠,所以check it out in its own window .

请记住:

  • 增量越大,循环次数越少(也越少处理)。
  • 增量越小,调整越“精细”和结果。

关于javascript - 调整文本大小以完全填满容器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25528559/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com