Javascript 缩放容器内的文本

目标是要有一个可调整大小的容器，其中包含一些文本，在垂直或水平方向上占用尽可能多的空间，而不必换行到下一行

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

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

测量文本容器的宽度（w）和高度（h），并除以字体大小（f）：

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

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

• 千瓦=瓦/瓦
• kh=H/ih

选择kw和kh之间的最小值：这是想要的尺寸

下面是一个JSFIDLE：

函数maximizeFontSize（$target）{
var-testingFont=1000；
$target.find（“.text wrapper”）.css（“字体大小”，testingFont+“px”）；
var textWidth=$（“.text wrapper”）.width（）/1000；
var textHeight=$（“.text wrapper”）.height（）/1000；
变量宽度=$（“.container”）.width（）；
变量高度=$（“.container”）.height（）；
var kWidth=宽度/文本宽度；
var kHeight=高度/文本高度；
var fontSize=kWidth

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

• 对使用的字体不可知
• 速度要快，以便可用于用户实时调整大小的容器（例如仪表板的面板）
• 主要是javascript。我唯一使用的CSS是说目标文本不能换行到下一行

---

如果文本是静态的，我们可以找到一种方法，在很大程度上依赖您使用的

字体样式和父/体
字体大小（因为我们将对文本使用
ems
）

尽管可以计算不同字体所需的相应宽度，但为了保持实用性，我不会在这里展示


假设我们的标记如下所示：

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

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

.text {
  font-size: 1em;
}

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

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

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


这个问题可能更适合于代码复查堆栈交换-是的，我没有理解你的问题是什么@pnknrgma，我想知道是否有代码改进。例如，我不喜欢第1点，我将初始字体大小设置为1000，这有点脏。
.text {
  font-size: 1em;
}

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