我有一个div具有固定高度和流体宽度（15%body宽度）。我希望里面的段落文本完全填满div;不溢出也不底部填充。
我尝试使用 jQuery 增加文本大小，直到段落的高度等于容器的高度div。到那时，文本应该完全覆盖div。唯一的问题是 font-size 以 0.5px 值递增。你不能做到33.3px；它必须是 33.0px 或 33.5px。因此，在 33 像素处，我的文字太短，无法覆盖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.
Text set at 33.5px. It overflows.
我调整了你的功能 http://jsfiddle.net/jhfrench/0yqb82qn/1/ to use em单位而不是px，并将增量从“0.5”调整为“0.003”。
预览窗格有点不可靠，所以在自己的窗口中查看 http://fiddle.jshell.net/jhfrench/0yqb82qn/1/show/.
记住：