Javascript 我怎么能有一个消息网格，每个消息都缩小以适应其容器

我正在创建一个消息墙，它使用JS动态更新

墙由12个绝对定位的分区组成的“网格”。每个div中都有一些文本

每个div都有固定的宽度和高度。还有一个具有固定宽度和高度的父容器div

信息墙将以16:9的固定比率显示在大型壁挂电视上，因此无需响应（就调整浏览器大小而言）

我遇到的问题是如何调整每条消息文本的大小以适应其div。我试图避免任何文本溢出

我尝试过一些JS解决方案，包括和，但这些解决方案似乎只能水平调整文本的大小（换句话说，它们不允许文本在其div中换行）

我在下面加入了一个我试图实现的模型

---

这里有一个简单的想法，但似乎可行

将字符串放入字体大小为1的固定宽度div中，查看其高度是否小于您的固定高度。如果是，请增大字体大小，查看是否适合

如果它停止安装，将字体大小减小1，并将高度设置为固定高度

这不是很有效，但我猜你不会有数百条消息，也不会每微秒更新一次

const fixedWidth=300；//将这些设置为每个文本框的固定高度和宽度
常数fixedHeight=200；//-目前以px为单位，但稍加计算可能以%为单位
const divs=document.queryselectoral（'.fit'）；
divs.forEach（函数（div）{
div.style.width=固定宽度+px'；
div.style.height='auto'；
让str=div.innerHTML；//我们知道它只是文本
让fontSize=1；//有点可笑，但需要从某个地方开始
div.style.fontSize=fontSize+'px'；
while（div.offsetHeight<固定高度）{
fontSize++；
div.style.fontSize=fontSize+'px'；
}
如果（fontSize）你有字体大小的上限和下限吗？或者你会做什么（低至1px？）。并且每条消息都是纯文本（没有HTML附加内容？）没有字体大小的上限，每条消息都是纯文本。到目前为止你尝试了什么？你被困在哪里了？为什么需要JS？