缩放容器内的文本

Question

目标是让一个可调整大小的容器内部有一些文本，可以垂直或水平地占用尽可能多的空间而不包裹到下一行。

在谷歌搜索后，我对找到的解决方案并不满意所以我创建了自己的解决方案，我想知道是否有人可以提出任何改进建议。

1. 将一个非常大的假字体大小（f）（例如1000）设置为目标文本

2. 测量文本容器的宽度（w）高度（h）并除以font-size（f）：

   • iw = w / f
   • ih = h / f

3. 将主容器宽度（W）除以iw和主容器高度（H）除以ih：

   • kw = W / iw
   • kh = H / ih

4. 在kw和kh之间选择最低：这是想要的FontSize。

这是一个小伙伴：https://jsfiddle.net/pinkynrg/44ua56dv/

function maximizeFontSize($target) {

  var testingFont = 1000;
    $target.find(".text-wrapper").css("font-size", testingFont+"px");

  var textWidth = $(".text-wrapper").width()/1000;
  var textHeight = $(".text-wrapper").height()/1000;
  var width = $(".container").width();
  var height = $(".container").height();

  var kWidth = width/textWidth;
  var kHeight = height/textHeight;
  var fontSize = kWidth < kHeight ? kWidth : kHeight;

  // finally
  $(".text-wrapper")
    .css("font-size", fontSize+"px")
    .css("line-height", height+"px");
}

我正在寻找的解决方案必须：

• 与所使用的字体无关。
• 速度快，因此可用于用户可现场调整大小的容器（例如仪表板的面板）。
• 主要是javascript。我使用的唯一CSS就是说目标文本不能换行到下一行。

Answer 1

如果文字是静态的，我们可以找到一种方法让这项工作在很大程度上依赖于您使用的font-style和父/身体font-size（因为我们将会使用ems为文本。）

虽然确实可以计算出不同字体所需的相应宽度，但我不会在此处显示它以保持实用。

让我们说我们的标记看起来像这样：

<div class="container">
  <p class="text">Some text</p>
</div>

我们的体型是：

body {
  font-size: 18px;
}

对于该文字大小，我们需要计算我们可以用于文本的最大ems，在这种情况下我保持简单，就像18px我只需要1em：

.text {
  font-size: 1em;
}

然后在JS中，我们将使用百分比滥用容器的font-size属性并执行：

const container = document.querySelector('.container')
container.style.fontSize = container.offsetWidth + '%'

然后我们的文本将占据与容器大致相同的宽度。 它可以更加动态地完成，但这取决于所需的解决方案。

Here's a JSFiddle for more clarification