Question

我的目标是让我的文本尽可能多地占用容器内的空间而不会溢出。如果只有几个单词，它们将具有非常大的字体大小，相反，如果有多个单词，则会导致较小的大小仍然占用尽可能多的容器区域。

所以，如果我有这个HTML

<div id="container">
    <h1 class="textFill">Make this fit as large as possible in the container</h1>
</div>

，容器为400×300px

#container {
    width: 400px;
    height: 300px;
    border: 1px solid blue;
}

我希望文本填满整个空间。到目前为止，我有这个脚本。

function textFill() {
    $(".textFill").each(function() {
      var
        $text = $(this),
        $parent = $text.parent();

      var
        textW = $text.width(),
        parentW = $parent.width(),
        ratio = parentW / textW;

      var
        originalSize = parseFloat($text.css('font-size')),
        newSize = originalSize * (1 * ratio);

      $text.css("font-size", newSize);

    });    
  }

这一切都在http://jsfiddle.net/nz7h2858/41/

Answer 1

我会增加字体大小，直到元素超出其父级边界。

然后将字体大小减一。

textFill();

$(window).resize(textFill);

function textFill() {
  var tf= $('.textFill');
  for(var i = 1 ; ; i++) {
    tf.css('font-size', i);
    if(tf.outerHeight(true) > tf.parent().innerHeight() ||
       tf[0].scrollWidth    > tf.width()
      ) {
      break;
    }
  }

  tf.css('font-size', i-1);
}

Fiddle

Answer 2

http://jsfiddle.net/nz7h2858/42/

这似乎在大多数时间都有效。偶尔会有一些文字超出范围，但只是略有不足。希望它足以让你入门！

需要注意的事项：

.textFill {
    display: inline;
}

因为h1是一个块元素，所以默认为它的父元素的全宽。所以你的宽度比率总是1：1。

其次，您还需要考虑身高。所以：

textW = $text.width(),
textH = $text.height(),
parentW = $parent.width(),
parentH = $parent.height(),
ratio = (parentW + parentH) / (textW + textH);

调整文本大小以适合整个容器中的文本

2 个答案: