调整文本大小以适应浏览器中的可用空间

我在这里发现了类似的问题: How to automatically resize the size of text inside a div?

我对你的代码做了一些修改。将P替换为DIV,并添加了一个jQuery函数: JSFiddle

$(function () {
  $('#test1 div').css('font-size', '1em');
  $('#test2 div').css('font-size', '1em');

  while ($('#test1 div').height() + $('#test1 h1').height() < $('#test1').height()) {
      $('#test1 div').css('font-size', (parseInt($('#test1 div').css('font-size')) + 1) + "px");
  }
  while ($('#test1 div').height() + $('#test1 h1').height() > $('#test1').height()) {
      $('#test1 div').css('font-size', (parseInt($('#test1 div').css('font-size')) - 1) + "px");
  }

  while ($('#test2 div').height() + $('#test2 h1').height() < $('#test2').height()) {
      $('#test2 div').css('font-size', (parseInt($('#test2 div').css('font-size')) + 1) + "px");
  }
  while ($('#test2 div').height() + $('#test2 h1').height() > $('#test2').height()) {
      $('#test2 div').css('font-size', (parseInt($('#test2 div').css('font-size')) - 1) + "px");
  }
});

您可以将此函数添加到window.onresize中,它将动态地适应您的文本。然而,您正在使用填充和H1标头,这需要使用WHILE参数进行一些操作。

附加到窗口调整大小功能:

window.onresize = function() {
... // function body
};